From 29a45d0227793ef027156fcf3a814b4721708046 Mon Sep 17 00:00:00 2001 From: Justin Joshi Date: Sat, 4 Oct 2025 22:27:04 -0400 Subject: [PATCH 1/2] first commit --- README.md | 23 ++- css/normalize.css | 349 ++++++++++++++++++++++++++++++++++++++++++++++ css/reset.css | 47 +++++++ css/style.css | 42 ++++++ index.html | 26 ++++ js/main.js | 40 ++++++ 6 files changed, 523 insertions(+), 4 deletions(-) create mode 100644 css/normalize.css create mode 100644 css/reset.css create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/README.md b/README.md index d8d6388..91c3fa8 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,24 @@ - (1 to 5 no 3) I feel good about my code - Anything specific on which you want feedback! -Example: -``` + I completed the challenge: 5 I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +It works :D + +Artist Cities Api + + +How It's Made: + +Tech used: HTML, CSS, JavaScript, Framework of choice + +I used the musicbrainz api to access a database of artists , and the cityninja api to get data about the cities + +Optimizations + + +I really enjoy working with apis. Apis are a lot of fun and its always enjoyable to manipulate data coming from fetch requests. However this time around, my creativity felt really stunted. Leon mentioned we should make a project that "looks good" and put time into these. But i really couldnt think of ideas that i resonated with that i could achieve in a reasonable time frame. So i ended up having to settle with finding whatever APi that actually works and making something that completes the assignment. Reading through documentation can be fun sometimes, especially when its something youre passionate about. This week, i just wanted to complete the assignment and help everybody make sure they completed theirs too. I had a lot of fun helping people with their assignments this week. + +Lessons Learned: +I learn that i cant always have creative ideas. It felt better for me to help others than work on my own projects! \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..5bc7dcd --- /dev/null +++ b/css/reset.css @@ -0,0 +1,47 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..fa4abd0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,42 @@ +/* Box Model Hack */ +* { + box-sizing: border-box; +} + +/* Clear fix hack */ +.clearfix:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} + +.clear { + clear: both; +} + +/****************************************** +/* BASE STYLES +/*******************************************/ + +body { + +} + + +/****************************************** +/* LAYOUT +/*******************************************/ +header { + +} + +footer { + +} + +/****************************************** +/* ADDITIONAL STYLES +/*******************************************/ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3c670b5 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + Blank Template + + + + + + + +

Enter name of artist, get the population of the city they are from

+ + + +

+ + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..9ab12e5 --- /dev/null +++ b/js/main.js @@ -0,0 +1,40 @@ +document.querySelector('button').addEventListener('click', getData) + + +async function getData() { + const firstName = document.querySelector('#first').value + const lastName = document.querySelector('#second').value + const url = `https://musicbrainz.org/ws/2/artist/?query=${firstName}\%2F${lastName}&fmt=json`; + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Response status: ${response.status}`); + } + + const result = await response.json(); + const artist = result.artists[0].name + const artistCity = result.artists[0]['begin-area'].name + + + const otherUrl = `https://api.api-ninjas.com/v1/city?name=${artistCity}`; + fetch(otherUrl, { + headers: { + 'X-Api-Key': 'KAM/3+x4kAELoEURvdgxNQ==VOIcDSa0EvvnPJbt' + } + }) + .then(res => res.json()) // parse response as JSON + .then(data => { + const cityPopulation = data[0].population + + document.querySelector('h2').innerHTML += `
Artist Name: ${artist}
` + document.querySelector('h2').innerHTML += `
Artist City: ${artistCity}
` + document.querySelector('h2').innerHTML += `
City Population: ${cityPopulation} people
` + + }) + .catch(err => { + console.log(`error ${err}`) + }); + } catch (error) { + console.error(error.message); + } +} \ No newline at end of file From cc5022235b4ee027d2445617df9ec003c8d76294 Mon Sep 17 00:00:00 2001 From: Justin Joshi Date: Tue, 7 Oct 2025 14:39:44 -0400 Subject: [PATCH 2/2] Update README.md --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 91c3fa8..ffd985d 100644 --- a/README.md +++ b/README.md @@ -17,16 +17,20 @@ I completed the challenge: 5 I feel good about my code: 4 -It works :D +I enjoyed making this one Artist Cities Api +https://justinjoshi.github.io/complex-api-bootcamp/ + How It's Made: Tech used: HTML, CSS, JavaScript, Framework of choice -I used the musicbrainz api to access a database of artists , and the cityninja api to get data about the cities +I used the musicbrainz api to access a database of artists , and the cityninja api to get data about the cities. This project was a lot of fun to make. I enjoyed reading the musicbrainz documentation, its a very good api. No api key required! + +I first setup two inputs, one for the artist first name, one for the artist last name. Then I setup my fetch request to get data from the API. I inserted the url link into the fetch request using a template literal and inserted the value of the inputs into that url following the api documentations guidelines. After doing this, I was able to get back a lot of information about the artist. I selected the value that shows where they were originally from, and fed that data into another API that has information about different cities. I inserted that city into the URL of another fetch request for the city API. This then returned population of the city they are from. I then inserted that city into the dom! Optimizations @@ -34,4 +38,5 @@ Optimizations I really enjoy working with apis. Apis are a lot of fun and its always enjoyable to manipulate data coming from fetch requests. However this time around, my creativity felt really stunted. Leon mentioned we should make a project that "looks good" and put time into these. But i really couldnt think of ideas that i resonated with that i could achieve in a reasonable time frame. So i ended up having to settle with finding whatever APi that actually works and making something that completes the assignment. Reading through documentation can be fun sometimes, especially when its something youre passionate about. This week, i just wanted to complete the assignment and help everybody make sure they completed theirs too. I had a lot of fun helping people with their assignments this week. Lessons Learned: -I learn that i cant always have creative ideas. It felt better for me to help others than work on my own projects! \ No newline at end of file +I learned that sometimes you need to focus on your own projects even when others are asking for help. This api was a lot of fun to build and I learned a lot about reading documentation. The music brainz api has a lot of good content in it, i definitely want to use this api again. I learned about grabbing data from a fetch and using it wherever I want. +