feat: complete project requirements#17

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
salymk wants to merge 1 commit into
base:master
Choose a base branch
from
Open

feat: complete project requirements #17

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
177 changes: 161 additions & 16 deletions app.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

// Create Dino Constructor
/**
* @description Represents a dinosoar object
* @constructor
* @param {string} species - The species of the dinosoar
* @param {string} author - The weight of the dinosoar
* @param {string} height - The height of the dinosoar
* @param {string} diet - The diet of the dinosoar
* @param {string} where - Where the dinosoar lived
* @param {string} when - When the dinosoar lived
* @param {string} fact - A fact about the dinosoar
*/
function Dino(species, weight, height, diet, where, when, fact) {
this.species = species;
this.weight = weight;
this.height = height;
this.diet = diet;
this.where = where;
this.when = when;
this.fact = fact;
}

/**
* @description Represents a human object
* @constructor
* @param {string} name - The name of the human
* @param {string} height - The height of the human
* @param {string} weight - The weight of the human
* @param {string} diet - The diet of the human
*/
function Human(name, height, weight, diet) {
this.name = name;
this.height = height;
this.weight = weight;
this.diet = diet;
}

// Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
const response = await fetch("dino.json");
const data = await response.json();
return data.Dinos;
};

getDinos().then((data) =>
data.forEach((dino) => {
const newDino = new Dino(
dino.species,
dino.weight,
dino.height,
dino.diet,
dino.where,
dino.when,
dino.fact
);
DinoList.push(newDino);
})
);

// Create Human Object
// Create Human Object
const human = new Human();

// Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
if (human.weight > this.weight) {
return `The human is heavier than the ${this.species}`;
} else if (human.weight < this.weight) {
return `The human is lighter than the ${this.species}`;
} else {
return `The human and the ${this.species} have the same weight`;
}
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
if (human.height > this.height) {
return `The human is taller than the ${this.species}`;
} else if (human.height < this.height) {
return `The human is shorter than the ${this.species}`;
} else {
return `The human and the ${this.species} have the same height`;
}
};

// Create Dino Compare Method 1
// NOTE: Weight in JSON file is in lbs, height in inches.
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
if (human.diet === this.diet.toLowerCase()) {
return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
} else {
return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
}
};

// Create Dino Compare Method 2
// NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


// Create Dino Compare Method 3
// NOTE: Weight in JSON file is in lbs, height in inches.
// add human to the middle of the grid
DinoList.splice(4, 0, human);

// loop through the DinoList array and create a tile for each dino
DinoList.forEach((dino, index) => {
// create a tile for the human and add it to the grid in the middle of the grid
if (index === 4) {
const humanTile = document.createElement("div");
humanTile.className = "grid-item";
humanTile.innerHTML = `
<h3>${human.name}</h3>
<img src="images/human.png" alt="human"/>
`;
grid.appendChild(humanTile);
return;
}

// Generate Tiles for each Dino in Array

// Add tiles to DOM
// get a random fact from the dino's fact array
const randomIndex = Math.floor(Math.random() * dino.fact.length);
const randomFact = dino.fact[randomIndex];
let fact;

// Remove form from screen
// if the dino is a pigeon, use the fact from the JSON file
if (dino.species === "Pigeon") {
fact = dino.fact;
} else {
fact = randomFact;
}

// create a tile for the dino and add it to the grid
const tile = document.createElement("div");
tile.className = "grid-item";
tile.innerHTML = `
<h3>${dino.species}</h3>
<img src="images/${dino.species}.png" alt="${dino.species}"/>
<p>${fact}</p>
`;
grid.appendChild(tile);
});
}

// Remove form from screen when user clicks button
function removeForm() {
const form = document.getElementById("dino-compare");
form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
DinoList.forEach((dino) => {
const diet = dino.compareDiet(human);
const height = dino.compareHeight(human);
const weight = dino.compareWeight(human);
const facts = [diet, height, weight];
if (dino.species !== "Pigeon") {
dino.fact = [dino.fact, ...facts];
}
return dino.fact;
});
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
const name = document.getElementById("name").value;
const feet = document.getElementById("feet").value;
const inches = document.getElementById("inches").value;
const weight = document.getElementById("weight").value;
const diet = document.getElementById("diet").value;

human.name = name;
// convert feet and inches to inches
human.height = feet * 12 + inches;
human.weight = weight;
human.diet = diet;

getRandomFact();
generateTiles();
removeForm();
});
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat: complete project requirements#17

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

salymk
wants to merge
1
commit into

base:master
Choose a base branch

from

 Open


feat: complete project requirements
#17
 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


177 changes: 161 additions & 16 deletions
app.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

 // Create Dino Constructor
/**
 * @description Represents a dinosoar object
 * @constructor
 * @param {string} species - The species of the dinosoar
 * @param {string} author - The weight of the dinosoar
 * @param {string} height - The height of the dinosoar
 * @param {string} diet - The diet of the dinosoar
 * @param {string} where - Where the dinosoar lived
 * @param {string} when - When the dinosoar lived
 * @param {string} fact - A fact about the dinosoar
 */
function Dino(species, weight, height, diet, where, when, fact) {
 this.species = species;
 this.weight = weight;
 this.height = height;
 this.diet = diet;
 this.where = where;
 this.when = when;
 this.fact = fact;
}

/**
 * @description Represents a human object
 * @constructor
 * @param {string} name - The name of the human
 * @param {string} height - The height of the human
 * @param {string} weight - The weight of the human
 * @param {string} diet - The diet of the human
 */
function Human(name, height, weight, diet) {
 this.name = name;
 this.height = height;
 this.weight = weight;
 this.diet = diet;
}

 // Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
 const response = await fetch("dino.json");
 const data = await response.json();
 return data.Dinos;
};

getDinos().then((data) =>
 data.forEach((dino) => {
 const newDino = new Dino(
 dino.species,
 dino.weight,
 dino.height,
 dino.diet,
 dino.where,
 dino.when,
 dino.fact
 );
 DinoList.push(newDino);
 })
);

 // Create Human Object
// Create Human Object
const human = new Human();

 // Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
 if (human.weight > this.weight) {
 return `The human is heavier than the ${this.species}`;
 } else if (human.weight < this.weight) {
 return `The human is lighter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same weight`;
 }
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
 if (human.height > this.height) {
 return `The human is taller than the ${this.species}`;
 } else if (human.height < this.height) {
 return `The human is shorter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same height`;
 }
};

 // Create Dino Compare Method 1
 // NOTE: Weight in JSON file is in lbs, height in inches. 
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
 if (human.diet === this.diet.toLowerCase()) {
 return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
 } else {
 return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
 }
};

 // Create Dino Compare Method 2
 // NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


 // Create Dino Compare Method 3
 // NOTE: Weight in JSON file is in lbs, height in inches.
 // add human to the middle of the grid
 DinoList.splice(4, 0, human);

 // loop through the DinoList array and create a tile for each dino
 DinoList.forEach((dino, index) => {
 // create a tile for the human and add it to the grid in the middle of the grid
 if (index === 4) {
 const humanTile = document.createElement("div");
 humanTile.className = "grid-item";
 humanTile.innerHTML = `
 <h3>${human.name}</h3>
 <img src="images/human.png" alt="human"/>
 `;
 grid.appendChild(humanTile);
 return;
 }

 // Generate Tiles for each Dino in Array

 // Add tiles to DOM
 // get a random fact from the dino's fact array
 const randomIndex = Math.floor(Math.random() * dino.fact.length);
 const randomFact = dino.fact[randomIndex];
 let fact;

 // Remove form from screen
 // if the dino is a pigeon, use the fact from the JSON file
 if (dino.species === "Pigeon") {
 fact = dino.fact;
 } else {
 fact = randomFact;
 }

 // create a tile for the dino and add it to the grid
 const tile = document.createElement("div");
 tile.className = "grid-item";
 tile.innerHTML = `
 <h3>${dino.species}</h3>
 <img src="images/${dino.species}.png" alt="${dino.species}"/>
 <p>${fact}</p>
 `;
 grid.appendChild(tile);
 });
}

// Remove form from screen when user clicks button
function removeForm() {
 const form = document.getElementById("dino-compare");
 form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
 DinoList.forEach((dino) => {
 const diet = dino.compareDiet(human);
 const height = dino.compareHeight(human);
 const weight = dino.compareWeight(human);
 const facts = [diet, height, weight];
 if (dino.species !== "Pigeon") {
 dino.fact = [dino.fact, ...facts];
 }
 return dino.fact;
 });
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
 const name = document.getElementById("name").value;
 const feet = document.getElementById("feet").value;
 const inches = document.getElementById("inches").value;
 const weight = document.getElementById("weight").value;
 const diet = document.getElementById("diet").value;

 human.name = name;
 // convert feet and inches to inches
 human.height = feet * 12 + inches;
 human.weight = weight;
 human.diet = diet;

 getRandomFact();
 generateTiles();
 removeForm();
});

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: complete project requirements#17

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

salymk
wants to merge
1
commit into

base:master
Choose a base branch

from

 Open


feat: complete project requirements
#17
 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


177 changes: 161 additions & 16 deletions
app.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

 // Create Dino Constructor
/**
 * @description Represents a dinosoar object
 * @constructor
 * @param {string} species - The species of the dinosoar
 * @param {string} author - The weight of the dinosoar
 * @param {string} height - The height of the dinosoar
 * @param {string} diet - The diet of the dinosoar
 * @param {string} where - Where the dinosoar lived
 * @param {string} when - When the dinosoar lived
 * @param {string} fact - A fact about the dinosoar
 */
function Dino(species, weight, height, diet, where, when, fact) {
 this.species = species;
 this.weight = weight;
 this.height = height;
 this.diet = diet;
 this.where = where;
 this.when = when;
 this.fact = fact;
}

/**
 * @description Represents a human object
 * @constructor
 * @param {string} name - The name of the human
 * @param {string} height - The height of the human
 * @param {string} weight - The weight of the human
 * @param {string} diet - The diet of the human
 */
function Human(name, height, weight, diet) {
 this.name = name;
 this.height = height;
 this.weight = weight;
 this.diet = diet;
}

 // Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
 const response = await fetch("dino.json");
 const data = await response.json();
 return data.Dinos;
};

getDinos().then((data) =>
 data.forEach((dino) => {
 const newDino = new Dino(
 dino.species,
 dino.weight,
 dino.height,
 dino.diet,
 dino.where,
 dino.when,
 dino.fact
 );
 DinoList.push(newDino);
 })
);

 // Create Human Object
// Create Human Object
const human = new Human();

 // Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
 if (human.weight > this.weight) {
 return `The human is heavier than the ${this.species}`;
 } else if (human.weight < this.weight) {
 return `The human is lighter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same weight`;
 }
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
 if (human.height > this.height) {
 return `The human is taller than the ${this.species}`;
 } else if (human.height < this.height) {
 return `The human is shorter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same height`;
 }
};

 // Create Dino Compare Method 1
 // NOTE: Weight in JSON file is in lbs, height in inches. 
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
 if (human.diet === this.diet.toLowerCase()) {
 return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
 } else {
 return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
 }
};

 // Create Dino Compare Method 2
 // NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


 // Create Dino Compare Method 3
 // NOTE: Weight in JSON file is in lbs, height in inches.
 // add human to the middle of the grid
 DinoList.splice(4, 0, human);

 // loop through the DinoList array and create a tile for each dino
 DinoList.forEach((dino, index) => {
 // create a tile for the human and add it to the grid in the middle of the grid
 if (index === 4) {
 const humanTile = document.createElement("div");
 humanTile.className = "grid-item";
 humanTile.innerHTML = `
 <h3>${human.name}</h3>
 <img src="images/human.png" alt="human"/>
 `;
 grid.appendChild(humanTile);
 return;
 }

 // Generate Tiles for each Dino in Array

 // Add tiles to DOM
 // get a random fact from the dino's fact array
 const randomIndex = Math.floor(Math.random() * dino.fact.length);
 const randomFact = dino.fact[randomIndex];
 let fact;

 // Remove form from screen
 // if the dino is a pigeon, use the fact from the JSON file
 if (dino.species === "Pigeon") {
 fact = dino.fact;
 } else {
 fact = randomFact;
 }

 // create a tile for the dino and add it to the grid
 const tile = document.createElement("div");
 tile.className = "grid-item";
 tile.innerHTML = `
 <h3>${dino.species}</h3>
 <img src="images/${dino.species}.png" alt="${dino.species}"/>
 <p>${fact}</p>
 `;
 grid.appendChild(tile);
 });
}

// Remove form from screen when user clicks button
function removeForm() {
 const form = document.getElementById("dino-compare");
 form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
 DinoList.forEach((dino) => {
 const diet = dino.compareDiet(human);
 const height = dino.compareHeight(human);
 const weight = dino.compareWeight(human);
 const facts = [diet, height, weight];
 if (dino.species !== "Pigeon") {
 dino.fact = [dino.fact, ...facts];
 }
 return dino.fact;
 });
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
 const name = document.getElementById("name").value;
 const feet = document.getElementById("feet").value;
 const inches = document.getElementById("inches").value;
 const weight = document.getElementById("weight").value;
 const diet = document.getElementById("diet").value;

 human.name = name;
 // convert feet and inches to inches
 human.height = feet * 12 + inches;
 human.weight = weight;
 human.diet = diet;

 getRandomFact();
 generateTiles();
 removeForm();
});

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: complete project requirements#17

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

salymk
wants to merge
1
commit into

base:master
Choose a base branch

from

 Open


feat: complete project requirements
#17
 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


177 changes: 161 additions & 16 deletions
app.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

 // Create Dino Constructor
/**
 * @description Represents a dinosoar object
 * @constructor
 * @param {string} species - The species of the dinosoar
 * @param {string} author - The weight of the dinosoar
 * @param {string} height - The height of the dinosoar
 * @param {string} diet - The diet of the dinosoar
 * @param {string} where - Where the dinosoar lived
 * @param {string} when - When the dinosoar lived
 * @param {string} fact - A fact about the dinosoar
 */
function Dino(species, weight, height, diet, where, when, fact) {
 this.species = species;
 this.weight = weight;
 this.height = height;
 this.diet = diet;
 this.where = where;
 this.when = when;
 this.fact = fact;
}

/**
 * @description Represents a human object
 * @constructor
 * @param {string} name - The name of the human
 * @param {string} height - The height of the human
 * @param {string} weight - The weight of the human
 * @param {string} diet - The diet of the human
 */
function Human(name, height, weight, diet) {
 this.name = name;
 this.height = height;
 this.weight = weight;
 this.diet = diet;
}

 // Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
 const response = await fetch("dino.json");
 const data = await response.json();
 return data.Dinos;
};

getDinos().then((data) =>
 data.forEach((dino) => {
 const newDino = new Dino(
 dino.species,
 dino.weight,
 dino.height,
 dino.diet,
 dino.where,
 dino.when,
 dino.fact
 );
 DinoList.push(newDino);
 })
);

 // Create Human Object
// Create Human Object
const human = new Human();

 // Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
 if (human.weight > this.weight) {
 return `The human is heavier than the ${this.species}`;
 } else if (human.weight < this.weight) {
 return `The human is lighter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same weight`;
 }
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
 if (human.height > this.height) {
 return `The human is taller than the ${this.species}`;
 } else if (human.height < this.height) {
 return `The human is shorter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same height`;
 }
};

 // Create Dino Compare Method 1
 // NOTE: Weight in JSON file is in lbs, height in inches. 
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
 if (human.diet === this.diet.toLowerCase()) {
 return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
 } else {
 return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
 }
};

 // Create Dino Compare Method 2
 // NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


 // Create Dino Compare Method 3
 // NOTE: Weight in JSON file is in lbs, height in inches.
 // add human to the middle of the grid
 DinoList.splice(4, 0, human);

 // loop through the DinoList array and create a tile for each dino
 DinoList.forEach((dino, index) => {
 // create a tile for the human and add it to the grid in the middle of the grid
 if (index === 4) {
 const humanTile = document.createElement("div");
 humanTile.className = "grid-item";
 humanTile.innerHTML = `
 <h3>${human.name}</h3>
 <img src="images/human.png" alt="human"/>
 `;
 grid.appendChild(humanTile);
 return;
 }

 // Generate Tiles for each Dino in Array

 // Add tiles to DOM
 // get a random fact from the dino's fact array
 const randomIndex = Math.floor(Math.random() * dino.fact.length);
 const randomFact = dino.fact[randomIndex];
 let fact;

 // Remove form from screen
 // if the dino is a pigeon, use the fact from the JSON file
 if (dino.species === "Pigeon") {
 fact = dino.fact;
 } else {
 fact = randomFact;
 }

 // create a tile for the dino and add it to the grid
 const tile = document.createElement("div");
 tile.className = "grid-item";
 tile.innerHTML = `
 <h3>${dino.species}</h3>
 <img src="images/${dino.species}.png" alt="${dino.species}"/>
 <p>${fact}</p>
 `;
 grid.appendChild(tile);
 });
}

// Remove form from screen when user clicks button
function removeForm() {
 const form = document.getElementById("dino-compare");
 form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
 DinoList.forEach((dino) => {
 const diet = dino.compareDiet(human);
 const height = dino.compareHeight(human);
 const weight = dino.compareWeight(human);
 const facts = [diet, height, weight];
 if (dino.species !== "Pigeon") {
 dino.fact = [dino.fact, ...facts];
 }
 return dino.fact;
 });
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
 const name = document.getElementById("name").value;
 const feet = document.getElementById("feet").value;
 const inches = document.getElementById("inches").value;
 const weight = document.getElementById("weight").value;
 const diet = document.getElementById("diet").value;

 human.name = name;
 // convert feet and inches to inches
 human.height = feet * 12 + inches;
 human.weight = weight;
 human.diet = diet;

 getRandomFact();
 generateTiles();
 removeForm();
});

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat: complete project requirements#17

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

salymk
wants to merge
1
commit into

base:master
Choose a base branch

from

 Open


feat: complete project requirements
#17
 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


177 changes: 161 additions & 16 deletions
app.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

 // Create Dino Constructor
/**
 * @description Represents a dinosoar object
 * @constructor
 * @param {string} species - The species of the dinosoar
 * @param {string} author - The weight of the dinosoar
 * @param {string} height - The height of the dinosoar
 * @param {string} diet - The diet of the dinosoar
 * @param {string} where - Where the dinosoar lived
 * @param {string} when - When the dinosoar lived
 * @param {string} fact - A fact about the dinosoar
 */
function Dino(species, weight, height, diet, where, when, fact) {
 this.species = species;
 this.weight = weight;
 this.height = height;
 this.diet = diet;
 this.where = where;
 this.when = when;
 this.fact = fact;
}

/**
 * @description Represents a human object
 * @constructor
 * @param {string} name - The name of the human
 * @param {string} height - The height of the human
 * @param {string} weight - The weight of the human
 * @param {string} diet - The diet of the human
 */
function Human(name, height, weight, diet) {
 this.name = name;
 this.height = height;
 this.weight = weight;
 this.diet = diet;
}

 // Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
 const response = await fetch("dino.json");
 const data = await response.json();
 return data.Dinos;
};

getDinos().then((data) =>
 data.forEach((dino) => {
 const newDino = new Dino(
 dino.species,
 dino.weight,
 dino.height,
 dino.diet,
 dino.where,
 dino.when,
 dino.fact
 );
 DinoList.push(newDino);
 })
);

 // Create Human Object
// Create Human Object
const human = new Human();

 // Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
 if (human.weight > this.weight) {
 return `The human is heavier than the ${this.species}`;
 } else if (human.weight < this.weight) {
 return `The human is lighter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same weight`;
 }
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
 if (human.height > this.height) {
 return `The human is taller than the ${this.species}`;
 } else if (human.height < this.height) {
 return `The human is shorter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same height`;
 }
};

 // Create Dino Compare Method 1
 // NOTE: Weight in JSON file is in lbs, height in inches. 
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
 if (human.diet === this.diet.toLowerCase()) {
 return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
 } else {
 return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
 }
};

 // Create Dino Compare Method 2
 // NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


 // Create Dino Compare Method 3
 // NOTE: Weight in JSON file is in lbs, height in inches.
 // add human to the middle of the grid
 DinoList.splice(4, 0, human);

 // loop through the DinoList array and create a tile for each dino
 DinoList.forEach((dino, index) => {
 // create a tile for the human and add it to the grid in the middle of the grid
 if (index === 4) {
 const humanTile = document.createElement("div");
 humanTile.className = "grid-item";
 humanTile.innerHTML = `
 <h3>${human.name}</h3>
 <img src="images/human.png" alt="human"/>
 `;
 grid.appendChild(humanTile);
 return;
 }

 // Generate Tiles for each Dino in Array

 // Add tiles to DOM
 // get a random fact from the dino's fact array
 const randomIndex = Math.floor(Math.random() * dino.fact.length);
 const randomFact = dino.fact[randomIndex];
 let fact;

 // Remove form from screen
 // if the dino is a pigeon, use the fact from the JSON file
 if (dino.species === "Pigeon") {
 fact = dino.fact;
 } else {
 fact = randomFact;
 }

 // create a tile for the dino and add it to the grid
 const tile = document.createElement("div");
 tile.className = "grid-item";
 tile.innerHTML = `
 <h3>${dino.species}</h3>
 <img src="images/${dino.species}.png" alt="${dino.species}"/>
 <p>${fact}</p>
 `;
 grid.appendChild(tile);
 });
}

// Remove form from screen when user clicks button
function removeForm() {
 const form = document.getElementById("dino-compare");
 form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
 DinoList.forEach((dino) => {
 const diet = dino.compareDiet(human);
 const height = dino.compareHeight(human);
 const weight = dino.compareWeight(human);
 const facts = [diet, height, weight];
 if (dino.species !== "Pigeon") {
 dino.fact = [dino.fact, ...facts];
 }
 return dino.fact;
 });
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
 const name = document.getElementById("name").value;
 const feet = document.getElementById("feet").value;
 const inches = document.getElementById("inches").value;
 const weight = document.getElementById("weight").value;
 const diet = document.getElementById("diet").value;

 human.name = name;
 // convert feet and inches to inches
 human.height = feet * 12 + inches;
 human.weight = weight;
 human.diet = diet;

 getRandomFact();
 generateTiles();
 removeForm();
});

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: complete project requirements#17

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

salymk
wants to merge
1
commit into

base:master
Choose a base branch

from

 Open


feat: complete project requirements
#17
 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


177 changes: 161 additions & 16 deletions
app.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

 // Create Dino Constructor
/**
 * @description Represents a dinosoar object
 * @constructor
 * @param {string} species - The species of the dinosoar
 * @param {string} author - The weight of the dinosoar
 * @param {string} height - The height of the dinosoar
 * @param {string} diet - The diet of the dinosoar
 * @param {string} where - Where the dinosoar lived
 * @param {string} when - When the dinosoar lived
 * @param {string} fact - A fact about the dinosoar
 */
function Dino(species, weight, height, diet, where, when, fact) {
 this.species = species;
 this.weight = weight;
 this.height = height;
 this.diet = diet;
 this.where = where;
 this.when = when;
 this.fact = fact;
}

/**
 * @description Represents a human object
 * @constructor
 * @param {string} name - The name of the human
 * @param {string} height - The height of the human
 * @param {string} weight - The weight of the human
 * @param {string} diet - The diet of the human
 */
function Human(name, height, weight, diet) {
 this.name = name;
 this.height = height;
 this.weight = weight;
 this.diet = diet;
}

 // Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
 const response = await fetch("dino.json");
 const data = await response.json();
 return data.Dinos;
};

getDinos().then((data) =>
 data.forEach((dino) => {
 const newDino = new Dino(
 dino.species,
 dino.weight,
 dino.height,
 dino.diet,
 dino.where,
 dino.when,
 dino.fact
 );
 DinoList.push(newDino);
 })
);

 // Create Human Object
// Create Human Object
const human = new Human();

 // Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
 if (human.weight > this.weight) {
 return `The human is heavier than the ${this.species}`;
 } else if (human.weight < this.weight) {
 return `The human is lighter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same weight`;
 }
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
 if (human.height > this.height) {
 return `The human is taller than the ${this.species}`;
 } else if (human.height < this.height) {
 return `The human is shorter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same height`;
 }
};

 // Create Dino Compare Method 1
 // NOTE: Weight in JSON file is in lbs, height in inches. 
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
 if (human.diet === this.diet.toLowerCase()) {
 return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
 } else {
 return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
 }
};

 // Create Dino Compare Method 2
 // NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


 // Create Dino Compare Method 3
 // NOTE: Weight in JSON file is in lbs, height in inches.
 // add human to the middle of the grid
 DinoList.splice(4, 0, human);

 // loop through the DinoList array and create a tile for each dino
 DinoList.forEach((dino, index) => {
 // create a tile for the human and add it to the grid in the middle of the grid
 if (index === 4) {
 const humanTile = document.createElement("div");
 humanTile.className = "grid-item";
 humanTile.innerHTML = `
 <h3>${human.name}</h3>
 <img src="images/human.png" alt="human"/>
 `;
 grid.appendChild(humanTile);
 return;
 }

 // Generate Tiles for each Dino in Array

 // Add tiles to DOM
 // get a random fact from the dino's fact array
 const randomIndex = Math.floor(Math.random() * dino.fact.length);
 const randomFact = dino.fact[randomIndex];
 let fact;

 // Remove form from screen
 // if the dino is a pigeon, use the fact from the JSON file
 if (dino.species === "Pigeon") {
 fact = dino.fact;
 } else {
 fact = randomFact;
 }

 // create a tile for the dino and add it to the grid
 const tile = document.createElement("div");
 tile.className = "grid-item";
 tile.innerHTML = `
 <h3>${dino.species}</h3>
 <img src="images/${dino.species}.png" alt="${dino.species}"/>
 <p>${fact}</p>
 `;
 grid.appendChild(tile);
 });
}

// Remove form from screen when user clicks button
function removeForm() {
 const form = document.getElementById("dino-compare");
 form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
 DinoList.forEach((dino) => {
 const diet = dino.compareDiet(human);
 const height = dino.compareHeight(human);
 const weight = dino.compareWeight(human);
 const facts = [diet, height, weight];
 if (dino.species !== "Pigeon") {
 dino.fact = [dino.fact, ...facts];
 }
 return dino.fact;
 });
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
 const name = document.getElementById("name").value;
 const feet = document.getElementById("feet").value;
 const inches = document.getElementById("inches").value;
 const weight = document.getElementById("weight").value;
 const diet = document.getElementById("diet").value;

 human.name = name;
 // convert feet and inches to inches
 human.height = feet * 12 + inches;
 human.weight = weight;
 human.diet = diet;

 getRandomFact();
 generateTiles();
 removeForm();
});

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: complete project requirements#17

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

salymk
wants to merge
1
commit into

base:master
Choose a base branch

from

 Open


feat: complete project requirements
#17
 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


177 changes: 161 additions & 16 deletions
app.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

 // Create Dino Constructor
/**
 * @description Represents a dinosoar object
 * @constructor
 * @param {string} species - The species of the dinosoar
 * @param {string} author - The weight of the dinosoar
 * @param {string} height - The height of the dinosoar
 * @param {string} diet - The diet of the dinosoar
 * @param {string} where - Where the dinosoar lived
 * @param {string} when - When the dinosoar lived
 * @param {string} fact - A fact about the dinosoar
 */
function Dino(species, weight, height, diet, where, when, fact) {
 this.species = species;
 this.weight = weight;
 this.height = height;
 this.diet = diet;
 this.where = where;
 this.when = when;
 this.fact = fact;
}

/**
 * @description Represents a human object
 * @constructor
 * @param {string} name - The name of the human
 * @param {string} height - The height of the human
 * @param {string} weight - The weight of the human
 * @param {string} diet - The diet of the human
 */
function Human(name, height, weight, diet) {
 this.name = name;
 this.height = height;
 this.weight = weight;
 this.diet = diet;
}

 // Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
 const response = await fetch("dino.json");
 const data = await response.json();
 return data.Dinos;
};

getDinos().then((data) =>
 data.forEach((dino) => {
 const newDino = new Dino(
 dino.species,
 dino.weight,
 dino.height,
 dino.diet,
 dino.where,
 dino.when,
 dino.fact
 );
 DinoList.push(newDino);
 })
);

 // Create Human Object
// Create Human Object
const human = new Human();

 // Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
 if (human.weight > this.weight) {
 return `The human is heavier than the ${this.species}`;
 } else if (human.weight < this.weight) {
 return `The human is lighter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same weight`;
 }
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
 if (human.height > this.height) {
 return `The human is taller than the ${this.species}`;
 } else if (human.height < this.height) {
 return `The human is shorter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same height`;
 }
};

 // Create Dino Compare Method 1
 // NOTE: Weight in JSON file is in lbs, height in inches. 
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
 if (human.diet === this.diet.toLowerCase()) {
 return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
 } else {
 return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
 }
};

 // Create Dino Compare Method 2
 // NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


 // Create Dino Compare Method 3
 // NOTE: Weight in JSON file is in lbs, height in inches.
 // add human to the middle of the grid
 DinoList.splice(4, 0, human);

 // loop through the DinoList array and create a tile for each dino
 DinoList.forEach((dino, index) => {
 // create a tile for the human and add it to the grid in the middle of the grid
 if (index === 4) {
 const humanTile = document.createElement("div");
 humanTile.className = "grid-item";
 humanTile.innerHTML = `
 <h3>${human.name}</h3>
 <img src="images/human.png" alt="human"/>
 `;
 grid.appendChild(humanTile);
 return;
 }

 // Generate Tiles for each Dino in Array

 // Add tiles to DOM
 // get a random fact from the dino's fact array
 const randomIndex = Math.floor(Math.random() * dino.fact.length);
 const randomFact = dino.fact[randomIndex];
 let fact;

 // Remove form from screen
 // if the dino is a pigeon, use the fact from the JSON file
 if (dino.species === "Pigeon") {
 fact = dino.fact;
 } else {
 fact = randomFact;
 }

 // create a tile for the dino and add it to the grid
 const tile = document.createElement("div");
 tile.className = "grid-item";
 tile.innerHTML = `
 <h3>${dino.species}</h3>
 <img src="images/${dino.species}.png" alt="${dino.species}"/>
 <p>${fact}</p>
 `;
 grid.appendChild(tile);
 });
}

// Remove form from screen when user clicks button
function removeForm() {
 const form = document.getElementById("dino-compare");
 form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
 DinoList.forEach((dino) => {
 const diet = dino.compareDiet(human);
 const height = dino.compareHeight(human);
 const weight = dino.compareWeight(human);
 const facts = [diet, height, weight];
 if (dino.species !== "Pigeon") {
 dino.fact = [dino.fact, ...facts];
 }
 return dino.fact;
 });
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
 const name = document.getElementById("name").value;
 const feet = document.getElementById("feet").value;
 const inches = document.getElementById("inches").value;
 const weight = document.getElementById("weight").value;
 const diet = document.getElementById("diet").value;

 human.name = name;
 // convert feet and inches to inches
 human.height = feet * 12 + inches;
 human.weight = weight;
 human.diet = diet;

 getRandomFact();
 generateTiles();
 removeForm();
});

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat: complete project requirements#17

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

salymk
wants to merge
1
commit into

base:master
Choose a base branch

from

 Open


feat: complete project requirements
#17
 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


177 changes: 161 additions & 16 deletions
app.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,32 +1,177 @@
const DinoList = [];

 // Create Dino Constructor
/**
 * @description Represents a dinosoar object
 * @constructor
 * @param {string} species - The species of the dinosoar
 * @param {string} author - The weight of the dinosoar
 * @param {string} height - The height of the dinosoar
 * @param {string} diet - The diet of the dinosoar
 * @param {string} where - Where the dinosoar lived
 * @param {string} when - When the dinosoar lived
 * @param {string} fact - A fact about the dinosoar
 */
function Dino(species, weight, height, diet, where, when, fact) {
 this.species = species;
 this.weight = weight;
 this.height = height;
 this.diet = diet;
 this.where = where;
 this.when = when;
 this.fact = fact;
}

/**
 * @description Represents a human object
 * @constructor
 * @param {string} name - The name of the human
 * @param {string} height - The height of the human
 * @param {string} weight - The weight of the human
 * @param {string} diet - The diet of the human
 */
function Human(name, height, weight, diet) {
 this.name = name;
 this.height = height;
 this.weight = weight;
 this.diet = diet;
}

 // Create Dino Objects
// Create Dino Objects from JSON file and push them to DinoList array
const getDinos = async () => {
 const response = await fetch("dino.json");
 const data = await response.json();
 return data.Dinos;
};

getDinos().then((data) =>
 data.forEach((dino) => {
 const newDino = new Dino(
 dino.species,
 dino.weight,
 dino.height,
 dino.diet,
 dino.where,
 dino.when,
 dino.fact
 );
 DinoList.push(newDino);
 })
);

 // Create Human Object
// Create Human Object
const human = new Human();

 // Use IIFE to get human data from form
// create a method that compares the human's weight to the dino's weight
Dino.prototype.compareWeight = function (human) {
 if (human.weight > this.weight) {
 return `The human is heavier than the ${this.species}`;
 } else if (human.weight < this.weight) {
 return `The human is lighter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same weight`;
 }
};

// create a method that compares the human's height to the dino's height
Dino.prototype.compareHeight = function (human) {
 if (human.height > this.height) {
 return `The human is taller than the ${this.species}`;
 } else if (human.height < this.height) {
 return `The human is shorter than the ${this.species}`;
 } else {
 return `The human and the ${this.species} have the same height`;
 }
};

 // Create Dino Compare Method 1
 // NOTE: Weight in JSON file is in lbs, height in inches. 
// create a method that compares the human's diet to the dino's diet
Dino.prototype.compareDiet = function (human) {
 if (human.diet === this.diet.toLowerCase()) {
 return `The human and the ${this.species} have the same diet, they are both ${this.diet}s`;
 } else {
 return `The human and the ${this.species} have different diets, the human is a ${human.diet} and the ${this.species} is a ${this.diet}`;
 }
};

 // Create Dino Compare Method 2
 // NOTE: Weight in JSON file is in lbs, height in inches.
// Generate Tiles for each Dino in Array
function generateTiles() {
const grid = document.getElementById("grid");


 // Create Dino Compare Method 3
 // NOTE: Weight in JSON file is in lbs, height in inches.
 // add human to the middle of the grid
 DinoList.splice(4, 0, human);

 // loop through the DinoList array and create a tile for each dino
 DinoList.forEach((dino, index) => {
 // create a tile for the human and add it to the grid in the middle of the grid
 if (index === 4) {
 const humanTile = document.createElement("div");
 humanTile.className = "grid-item";
 humanTile.innerHTML = `
 <h3>${human.name}</h3>
 <img src="images/human.png" alt="human"/>
 `;
 grid.appendChild(humanTile);
 return;
 }

 // Generate Tiles for each Dino in Array

 // Add tiles to DOM
 // get a random fact from the dino's fact array
 const randomIndex = Math.floor(Math.random() * dino.fact.length);
 const randomFact = dino.fact[randomIndex];
 let fact;

 // Remove form from screen
 // if the dino is a pigeon, use the fact from the JSON file
 if (dino.species === "Pigeon") {
 fact = dino.fact;
 } else {
 fact = randomFact;
 }

 // create a tile for the dino and add it to the grid
 const tile = document.createElement("div");
 tile.className = "grid-item";
 tile.innerHTML = `
 <h3>${dino.species}</h3>
 <img src="images/${dino.species}.png" alt="${dino.species}"/>
 <p>${fact}</p>
 `;
 grid.appendChild(tile);
 });
}

// Remove form from screen when user clicks button
function removeForm() {
 const form = document.getElementById("dino-compare");
 form.style.display = "none";
}

// Generate random facts for each dino object, 1 from the JSON file and 3 random facts from the methods created above
function getRandomFact() {
 DinoList.forEach((dino) => {
 const diet = dino.compareDiet(human);
 const height = dino.compareHeight(human);
 const weight = dino.compareWeight(human);
 const facts = [diet, height, weight];
 if (dino.species !== "Pigeon") {
 dino.fact = [dino.fact, ...facts];
 }
 return dino.fact;
 });
}

// On button click, prepare and display infographic
document.getElementById("btn").addEventListener("click", () => {
 const name = document.getElementById("name").value;
 const feet = document.getElementById("feet").value;
 const inches = document.getElementById("inches").value;
 const weight = document.getElementById("weight").value;
 const diet = document.getElementById("diet").value;

 human.name = name;
 // convert feet and inches to inches
 human.height = feet * 12 + inches;
 human.weight = weight;
 human.diet = diet;

 getRandomFact();
 generateTiles();
 removeForm();
});