From 8a1db3a63f5826e8445f4beafeeea6c7376db0f5 Mon Sep 17 00:00:00 2001 From: Michael Eisenbraun Date: Fri, 14 Feb 2025 14:36:07 -0500 Subject: [PATCH 1/9] Adds gitignore --- .gitignore | 225 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..9bd61150 --- /dev/null +++ b/.gitignore @@ -0,0 +1,225 @@ +# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,visualstudiocode,nova,node +# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,visualstudiocode,nova,node + +### macOS ### +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### macOS Patch ### +# iCloud generated files +*.icloud + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +### Node Patch ### +# Serverless Webpack directories +.webpack/ + +# Optional stylelint cache + +# SvelteKit build / generate output +.svelte-kit + +### nova ### +.nova/* + +### VisualStudioCode ### +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +### VisualStudioCode Patch ### +# Ignore all local history of files +.history +.ionide + +### Windows ### +# Windows thumbnail cache files +Thumbs.db +Thumbs.db:encryptable +ehthumbs.db +ehthumbs_vista.db + +# Dump file +*.stackdump + +# Folder config file +[Dd]esktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msix +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# End of https://www.toptal.com/developers/gitignore/api/windows,macos,visualstudiocode,nova,node \ No newline at end of file From ff387d457d8db7f92a42a527c4e54f8a4b2399ff Mon Sep 17 00:00:00 2001 From: Michael Eisenbraun Date: Fri, 14 Feb 2025 19:39:26 +0000 Subject: [PATCH 2/9] Adds page functionality - Retrieves form data on submit - Creates Humand and Dino objects - Hides form - Creates and inserts Tiles from created object From 8f811c76a22a9133d6ffe2dc45a82050d244083d Mon Sep 17 00:00:00 2001 From: Michael Eisenbraun Date: Fri, 14 Feb 2025 19:49:50 +0000 Subject: [PATCH 3/9] Redesigns compare form - Utilizes Bootstrap Framework --- app.css | 19 ++++++--- app.js | 116 +++++++++++++++++++++++++++++++++++++++++++---------- index.html | 55 ++++++++++++++++--------- 3 files changed, 145 insertions(+), 45 deletions(-) diff --git a/app.css b/app.css index bc7c9b7f..3763d77f 100644 --- a/app.css +++ b/app.css @@ -3,7 +3,6 @@ body { background: rgb(111, 208, 224); background: linear-gradient(0deg,rgb(111, 208, 224) 0%, rgb(171, 228, 167) 100%); font-family: 'Open Sans', sans-serif; - text-align: center; min-height: 100vh; } @@ -19,6 +18,9 @@ h3 { font-family: 'Oswald', sans-serif; } +img { + max-width: 100%; +} @media (min-width: 650px) { h1 { font-size: 5em; @@ -31,7 +33,7 @@ h3 { } } -p { +p, label { font-weight: 100; } @@ -126,13 +128,14 @@ p { } form p { + display: block; margin-bottom: 0.3em; font-size: 1.3em; font-weight: 600; font-family: 'Oswald', sans-serif; } -input { +/* input { padding: 0.7em; background: #fff; border: 0; @@ -147,13 +150,13 @@ input { .form-field__full { width: 100%; box-sizing: border-box; -} +} */ select { display: block; } -#btn { +/* .btn { display: inline-block; background: #ccc; padding: 0.8em; @@ -161,10 +164,14 @@ select { transition: ease 0.3s all; } -#btn:hover { +.btn:hover { background: #777; color: #fff; cursor: pointer; +} */ + +.d-inline { + display: inline-block; } /* Footer */ diff --git a/app.js b/app.js index 36c871d0..b7abc7f8 100644 --- a/app.js +++ b/app.js @@ -1,32 +1,106 @@ +function createElement (type, props, ...children) { + const $el = document.createElement(type) + Object.keys(props).forEach((prop) => + prop === 'style' ? + Object.keys(props[prop]).forEach((style) => $el[prop][style] = props[prop][style]) : + $el[prop] = props[prop]); + $el.append(...children) + return $el +} - // Create Dino Constructor +function Tile (species, name, fact) { + return createElement( + 'div', + { className: 'grid-item' }, + createElement('h3', { className: 'text-center mt-2' }, name), + createElement('img', { src: `images/${species.toLowerCase()}.png`, alt: name}), + createElement('p', {}, fact) + ) +} - // Create Dino Objects - - - // Create Human Object - - // Use IIFE to get human data from form - - - // Create Dino Compare Method 1 - // NOTE: Weight in JSON file is in lbs, height in inches. - +function Dino ({ species, weight, height, diet, where, when, fact }, human) { + const compareWeight = () => `The ${species} weighs ${weight - human.getWeight()} more lbs than you.` + const compareHeight = () => `The ${species} is ${height - human.getHeight()} inches more than you.` + const compareDiet = () => { + if (diet.toLowerCase() === human.getDiet().toLowerCase()) { + return `The ${species} and you are both ${diet}s.` + } else { + return `The ${species} was a ${diet} and you are a ${human.getDiet()}` + } + } - // Create Dino Compare Method 2 - // NOTE: Weight in JSON file is in lbs, height in inches. + const randomFact = () => { + + if (species === 'Pigeon') { + return fact + } + + const roll = Math.floor(Math.random() * 6 + 1) + + switch (roll) { + case 1: + return fact + case 2: + return compareWeight() + case 3: + return compareHeight() + case 4: + return compareDiet() + case 5: + return `The ${species} lived during the ${when} period.` + case 6: + return `The ${species} once lived in what is now ${where}.` + } + + } + + const html = () => Tile(species, species, randomFact()) + + return { + html + } +} +function Human ({ name, feet, inches, weight, diet }) { + const html = () => Tile('Human', name, '') + const getWeight = () => parseInt(weight) + const getHeight = () => parseInt(feet) * 12 + parseInt(inches) + const getDiet = () => diet - // Create Dino Compare Method 3 - // NOTE: Weight in JSON file is in lbs, height in inches. + return { + html, + getWeight, + getHeight, + getDiet + } +} - // Generate Tiles for each Dino in Array - - // Add tiles to DOM +// Form Handling +const $compareForm = document.getElementById('compareForm') - // Remove form from screen +$compareForm.addEventListener('submit', async function (e) { + e.preventDefault() + + const response = await fetch('dino.json') + const data = await response.json() + const $grid = document.getElementById('grid') + const tiles = [] + + const elements = Array.from($compareForm.elements) + const formData = {} + elements.forEach(($el) => { formData[$el.id] = $el.value }) + const human = Human({ name: 'Ted', feet: '5', inches: '11', weight: '170', diet: 'Herbavor'}) + // const human = Human(formData) + + $compareForm.style.display = 'none' + const dinos = data.Dinos.forEach((dino, index) => { + if (index === 4) { + $grid.append(human.html()) + } -// On button click, prepare and display infographic + $grid.append(Dino(dino, human).html()) + }) +}) \ No newline at end of file diff --git a/index.html b/index.html index d9ddfd1f..704ce7c8 100644 --- a/index.html +++ b/index.html @@ -9,38 +9,57 @@ + -
+

Natural History Museum

Dinosaurs

How do you compare?

-
-
-

Name:

- -

Height

- - -

Weight:

- -

Diet:

- -
Compare Me!
+ +
+
+ + +
+ +
+ +
+
+ Feet +
+
+ Inches +
+
+
+ +
+ + lbs +
+ +
+ + +
+
-
+

Data Sourced from Wikipedia.org, all numbers are approximations.

From 2370e444c062362a77ba8fcd714c34e8eef38751 Mon Sep 17 00:00:00 2001 From: Michael Eisenbraun Date: Fri, 14 Feb 2025 15:08:53 -0500 Subject: [PATCH 4/9] Corrects spelling --- dino.json | 16 ++++++++-------- index.html | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/dino.json b/dino.json index 468a614a..e0c6eafe 100644 --- a/dino.json +++ b/dino.json @@ -4,7 +4,7 @@ "species": "Triceratops", "weight": 13000, "height": 114, - "diet": "herbavor", + "diet": "herbivore", "where": "North America", "when": "Late Cretaceous", "fact": "First discovered in 1889 by Othniel Charles Marsh" @@ -13,7 +13,7 @@ "species": "Tyrannosaurus Rex", "weight": 11905, "height": 144, - "diet": "carnivor", + "diet": "carnivore", "where": "North America", "when": "Late Cretaceous", "fact": "The largest known skull measures in at 5 feet long." @@ -22,7 +22,7 @@ "species": "Anklyosaurus", "weight": 10500, "height": 55, - "diet": "herbavor", + "diet": "herbivore", "where": "North America", "when": "Late Cretaceous", "fact": "Anklyosaurus survived for approximately 135 million years." @@ -31,7 +31,7 @@ "species": "Brachiosaurus", "weight": 70000, "height": "372", - "diet": "herbavor", + "diet": "herbivore", "where": "North America", "when": "Late Jurasic", "fact": "An asteroid was named 9954 Brachiosaurus in 1991." @@ -40,7 +40,7 @@ "species": "Stegosaurus", "weight": 11600, "height": 79, - "diet": "herbavor", + "diet": "herbivore", "where": "North America, Europe, Asia", "when": "Late Jurasic to Early Cretaceous", "fact": "The Stegosaurus had between 17 and 22 seperate places and flat spines." @@ -49,7 +49,7 @@ "species": "Elasmosaurus", "weight": 16000, "height": 59, - "diet": "carnivor", + "diet": "carnivore", "where": "North America", "when": "Late Cretaceous", "fact": "Elasmosaurus was a marine reptile first discovered in Kansas." @@ -58,7 +58,7 @@ "species": "Pteranodon", "weight": 44, "height": 20, - "diet": "carnivor", + "diet": "carnivore", "where": "North America", "when": "Late Cretaceous", "fact": "Actually a flying reptile, the Pteranodon is not a dinosaur." @@ -67,7 +67,7 @@ "species": "Pigeon", "weight": 0.5, "height": 9, - "diet": "herbavor", + "diet": "herbivore", "where": "World Wide", "when": "Holocene", "fact": "All birds are living dinosaurs." diff --git a/index.html b/index.html index 704ce7c8..e220110b 100644 --- a/index.html +++ b/index.html @@ -49,9 +49,9 @@

How do you compare?

From 9704e33021dbdb885afc201816aa73399c54aef5 Mon Sep 17 00:00:00 2001 From: Michael Eisenbraun Date: Fri, 14 Feb 2025 21:13:23 +0000 Subject: [PATCH 5/9] Adds form validation --- app.js | 46 ++++++++++++++++++++++++++-------------------- index.html | 20 ++++++++++++++++---- 2 files changed, 42 insertions(+), 24 deletions(-) diff --git a/app.js b/app.js index b7abc7f8..1ea7a526 100644 --- a/app.js +++ b/app.js @@ -83,24 +83,30 @@ const $compareForm = document.getElementById('compareForm') $compareForm.addEventListener('submit', async function (e) { e.preventDefault() - const response = await fetch('dino.json') - const data = await response.json() - const $grid = document.getElementById('grid') - const tiles = [] - - const elements = Array.from($compareForm.elements) - const formData = {} - elements.forEach(($el) => { formData[$el.id] = $el.value }) - const human = Human({ name: 'Ted', feet: '5', inches: '11', weight: '170', diet: 'Herbavor'}) - // const human = Human(formData) - - $compareForm.style.display = 'none' - - const dinos = data.Dinos.forEach((dino, index) => { - if (index === 4) { - $grid.append(human.html()) - } - - $grid.append(Dino(dino, human).html()) - }) + // validating form + if ($compareForm.checkValidity()) { + // creating info graph + const response = await fetch('dino.json') + const data = await response.json() + const $grid = document.getElementById('grid') + const tiles = [] + + const elements = Array.from($compareForm.elements) + const formData = {} + elements.forEach(($el) => { formData[$el.id] = $el.value }) + // const human = Human({ name: 'Ted', feet: '5', inches: '11', weight: '170', diet: 'Herbavor'}) + const human = Human(formData) + + $compareForm.style.display = 'none' + + const dinos = data.Dinos.forEach((dino, index) => { + if (index === 4) { + $grid.append(human.html()) + } + + $grid.append(Dino(dino, human).html()) + }) + } else { + $compareForm.classList.add('was-validated') + } }) \ No newline at end of file diff --git a/index.html b/index.html index e220110b..4336d579 100644 --- a/index.html +++ b/index.html @@ -26,33 +26,45 @@

How do you compare?

+
+ Please provide a name +
- Feet + Feet
- Inches + Inches
+
+ Please provide a height +
- lbs + lbs +
+ Please provide a weight +
- +
+ Please select a diet +
From acfa6c890e34350844d8facae4998b22ef39c606 Mon Sep 17 00:00:00 2001 From: Michael Eisenbraun Date: Fri, 14 Feb 2025 21:49:49 +0000 Subject: [PATCH 6/9] Refactors the Dino class to improve decoupling - Removes the need for human object when creating a dino object - Creates getter methods for dino data - Moves the randomFact logic to outside of the class --- app.js | 79 ++++++++++++++++++++++++++++++++++------------------------ 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/app.js b/app.js index 1ea7a526..07a05608 100644 --- a/app.js +++ b/app.js @@ -19,10 +19,10 @@ function Tile (species, name, fact) { ) } -function Dino ({ species, weight, height, diet, where, when, fact }, human) { - const compareWeight = () => `The ${species} weighs ${weight - human.getWeight()} more lbs than you.` - const compareHeight = () => `The ${species} is ${height - human.getHeight()} inches more than you.` - const compareDiet = () => { +function Dino ({ species, weight, height, diet, where, when, fact }) { + const compareWeight = (human) => `The ${species} weighs ${weight - human.getWeight()} more lbs than you.` + const compareHeight = (human) => `The ${species} is ${height - human.getHeight()} inches more than you.` + const compareDiet = (human) => { if (diet.toLowerCase() === human.getDiet().toLowerCase()) { return `The ${species} and you are both ${diet}s.` } else { @@ -30,34 +30,21 @@ function Dino ({ species, weight, height, diet, where, when, fact }, human) { } } - const randomFact = () => { - - if (species === 'Pigeon') { - return fact - } - - const roll = Math.floor(Math.random() * 6 + 1) - - switch (roll) { - case 1: - return fact - case 2: - return compareWeight() - case 3: - return compareHeight() - case 4: - return compareDiet() - case 5: - return `The ${species} lived during the ${when} period.` - case 6: - return `The ${species} once lived in what is now ${where}.` - } - - } + const getFact = () => fact + const getSpecies = () => species + const getWhen = () => when + const getWhere = () => where - const html = () => Tile(species, species, randomFact()) + const html = (fact) => Tile(species, species, fact) return { + compareWeight, + compareHeight, + compareDiet, + getFact, + getSpecies, + getWhen, + getWhere, html } } @@ -77,6 +64,7 @@ function Human ({ name, feet, inches, weight, diet }) { } + // Form Handling const $compareForm = document.getElementById('compareForm') @@ -99,12 +87,39 @@ $compareForm.addEventListener('submit', async function (e) { $compareForm.style.display = 'none' - const dinos = data.Dinos.forEach((dino, index) => { + const dinos = data.Dinos.forEach((obj, index) => { if (index === 4) { $grid.append(human.html()) } - - $grid.append(Dino(dino, human).html()) + + const dino = Dino(obj) + + if (dino.getSpecies() === 'Pigeon') { + $grid.append(dino.html(dino.getFact())) + } else { + const roll = Math.floor(Math.random() * 6 + 1) + + switch (roll) { + case 1: + $grid.append(dino.html(dino.getFact())) + break; + case 2: + $grid.append(dino.html(dino.compareWeight(human))) + break; + case 3: + $grid.append(dino.html(dino.compareHeight(human))) + break; + case 4: + $grid.append(dino.html(dino.compareDiet(human))) + break; + case 5: + $grid.append(dino.html(`The ${dino.getSpecies()} lived during the ${dino.getWhen()} period.`)) + break; + case 6: + $grid.append(dino.html(`The ${dino.getSpecies()} lived during the ${dino.getWhere()} period.`)) + break; + } + } }) } else { $compareForm.classList.add('was-validated') From 7c7a9f1ed68559d8b74ad04e049479ba71d826d8 Mon Sep 17 00:00:00 2001 From: Michael Eisenbraun Date: Sat, 15 Feb 2025 02:04:07 +0000 Subject: [PATCH 7/9] Adds the ability to return to the form --- app.js | 15 +++++++++++---- index.html | 5 ++++- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index 07a05608..8f8caca7 100644 --- a/app.js +++ b/app.js @@ -65,8 +65,9 @@ function Human ({ name, feet, inches, weight, diet }) { -// Form Handling const $compareForm = document.getElementById('compareForm') +const $return = document.getElementById('return') +const $grid = document.getElementById('grid') $compareForm.addEventListener('submit', async function (e) { e.preventDefault() @@ -76,7 +77,6 @@ $compareForm.addEventListener('submit', async function (e) { // creating info graph const response = await fetch('dino.json') const data = await response.json() - const $grid = document.getElementById('grid') const tiles = [] const elements = Array.from($compareForm.elements) @@ -85,7 +85,8 @@ $compareForm.addEventListener('submit', async function (e) { // const human = Human({ name: 'Ted', feet: '5', inches: '11', weight: '170', diet: 'Herbavor'}) const human = Human(formData) - $compareForm.style.display = 'none' + $compareForm.classList.add('d-none') + $return.classList.remove('d-none') const dinos = data.Dinos.forEach((obj, index) => { if (index === 4) { @@ -124,4 +125,10 @@ $compareForm.addEventListener('submit', async function (e) { } else { $compareForm.classList.add('was-validated') } -}) \ No newline at end of file +}) + +$return.addEventListener('click', function () { + $compareForm.classList.remove('d-none') + $return.classList.add('d-none') + $grid.innerHTML = '' +}) \ No newline at end of file diff --git a/index.html b/index.html index 4336d579..121d23e1 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@

Dinosaurs

How do you compare?

-
+
@@ -70,6 +70,9 @@

How do you compare?

+
+ +