diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..529b87b Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d8d6388..fce0e1c 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,27 @@ -# 📊 Project: Complex API - -### Goal: Use data returned from one api to make a request to another api and display the data returned - -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (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... -``` +# Music Calculator +
+ +_This is an app that sends a request to the Tastedive and AudioDB APIs to calculate a new artist for you to enjoy based off of magical musical calculations._ + +
+ +Here is the rendered project + +
+ +preview of the app + + +## How It's Made: +_Tech used: HTML, CSS, JavaScript, Restful APIs_ + +I used fetch requests to grab an artist from a music database. The result(s) of your search(es) are then passed through TasteDive to find artists that cross-correlate with your artists. The top result is displayed while tertiary results are given as links for you to follow up on. + + +## Lessons Learned: +API databases are really fun! The extent that people go to to make information accessible is amazing. On the tech side, I learned about properly working with asynchronous behavior using ```.then()``` statements. + +### More Projects: +Wu-Tang Name Generator + +A really slick chatroom diff --git "a/Screenshot 2025-11-09 at 9.23.46\342\200\257PM.png" "b/Screenshot 2025-11-09 at 9.23.46\342\200\257PM.png" new file mode 100644 index 0000000..f4a88d2 Binary files /dev/null and "b/Screenshot 2025-11-09 at 9.23.46\342\200\257PM.png" differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..3b87ab1 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,146 @@ +body { + display:flex; + flex-direction: column; + background-color: #000; + color:white; + font-family: 'Lexend','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +.introContainer{ + height:150px; + display: flex; + align-content: center; + justify-content: space-between; +} + +h1 { + font-family: 'Poiret One',Arial, Helvetica, sans-serif; +} + +.directions { + height:20%; + text-align: center; + font-family: 'Poiret One',Arial, Helvetica, sans-serif; +} + +h4 { + font-size: 1.3rem; +} + +.inputs { + display: flex; + height: 50%; + width: 100%; + flex-direction: row; + align-content: center; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.5rem; +} + +.inputs > div { + display: flex; + align-content: center; + justify-content: center; + flex-wrap: wrap; +} + +input { + height:3rem; + font-size: 1.5rem; + width:25%; + background-color: gray; +} + +.title{ + background-color: #121212; + width:35%; + padding-left: 30px; +} +/* got this button from this site: https://prismic.io/blog/css-button-animations */ +.btn { + position: relative; + padding: 1.5rem 3rem; + font-size: 1.1rem; + font-weight: 600; + color: #fff; + background: none; + border: none; + cursor: pointer; + overflow: hidden; + transition: all 0.4s ease; + min-width: 200px; + z-index: 1; + height:100px; + margin: auto; +} + +.neon-pulse { + background: #000; + border: 2px solid #0ff; + box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); + overflow: visible; +} + +.neon-pulse::before, +.neon-pulse::after { + content: ""; + position: absolute; + inset: -4px; + border: 2px solid #0ff; + border-radius: inherit; + animation: pulseOut 2s ease-out infinite; + opacity: 0; +} + +.neon-pulse::after { + animation-delay: 1s; +} + +@keyframes pulseOut { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(1.5); + opacity: 0; + } +} + +.recContainer{ + display: flex; + height:700px; + background: linear-gradient(132deg, #000000,#007300, #00007b,#7e003f,#7a0000,#807e7e); + background-size: 400% 400%; + animation: BackgroundGradient 15s ease infinite; + justify-content: space-around; +} + +@keyframes BackgroundGradient { + 0% {background-position: 0% 50%;} + 50% {background-position: 100% 50%;} + 100% {background-position: 0% 50%;} +} + +a{ + color:black +} + +h2 { + font-size: 1.5rem; +} + +li { + padding:4px; + display: inline-flex; + flex-wrap: wrap; +} + +img { + margin-right: 5px; +} + +a:hover { + color:white +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..688ccb3 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + Music Recommender + + + + + + + + + +
+
+

Music Calculator

+

Find a new artist by mixing artists together

+
+
+
+

Input your music/musicians here

+
+
+
+
+
+
+
+ + +
+ + +
+ +
+

+ +

+

+ +
+
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..5620ee3 --- /dev/null +++ b/js/main.js @@ -0,0 +1,113 @@ +// const spotifyAPIKey = 'bd5fd62c63e64962ab58abf607daaddb' + +// ///access codes/// needs to be updated every hour +// let Spotifyaccess = {"access_token":"BQCikM5m0vjgBmjhToCQak0PMKq7HGHElIoZnMsFb5MW2ywxuRftEZoc1yYVkUnEogHAmopYZFkLzL_vbb5wiJUt7ma0aeDZG5vIYoMsk6v_9D2AzQpxhdY_9LjT2HhqL41VE2_n-3Y","token_type":"Bearer","expires_in":3600} + + + +// //learned how to use headers and cURL from this article: https://apidog.com/blog/curl-javascript-fetch/ +// // fetch('https://api.spotify.com/v1/playlists/7f87ZT5QeiF5Ycyv4EUn3q', { +// // headers: { +// // 'Authorization':`Bearer ${Spotifyaccess.access_token}` +// // }, +// // method:'GET' +// // }) +// // .then(res => res.json()) +// // .then(data => { +// // let musicChoices = [] +// // data.tracks.items.forEach(item => +// // musicChoices.push(item.track.name.toLowerCase().split(' ').join('+')) +// // ) +// // const musicString = musicChoices.join('%2C+') +// // console.log(musicString) + +// // fetch(`https://corsproxy.io/?url=https://tastedive.com/api/similar?q=${musicString}&type=music&k=${tastediveAPI}&info=1`) +// // .then(res => res.json()) +// // .then(data => { +// // console.log(data) +// // console.log(data.similar.results[0]) +// // }) +// // }) +// // .catch(err => console.log('Error: ' + err)) + +document.querySelector('button').addEventListener('click',calculate) + +function calculate() { + const musicArray = [] + document.querySelectorAll('input').forEach(input => + musicArray.push(input.value.toLowerCase().split(' ').join('+')) + ) + const musicString = musicArray.join('%2C+') + console.log(musicString) + const tastediveAPI = '1059798-GodwinKa-6A33A965' + fetch(`https://corsproxy.io/?url=https://tastedive.com/api/similar?q=${musicString}&type=music&k=${tastediveAPI}&info=1`) + .then(res => res.json()) + .then(data => { + console.log(data) + const topArtist = data.similar.results[0].name + console.log(topArtist) + document.querySelector('h2').innerText = topArtist + const taString = topArtist.split(' ').join('+') + console.log(taString) + document.querySelector('a').href= data.similar.results[0].yUrl + document.querySelector('a').innerText = data.similar.results[0].yUrl + const list = document.querySelector('ul') + for (let i = 1; i < 15;i++){ + let listItem = document.createElement('li') + let linkClick = document.createElement('a') + linkClick.href = data.similar.results[i].yUrl + linkClick.innerText = data.similar.results[i].name + list.appendChild(listItem) + listItem.appendChild(linkClick) + } + fetch(`https://www.theaudiodb.com/api/v1/json/123/search.php?s=${taString}`) + .then(res => res.json()) + .then(newData => { + console.table(newData.artists[0]) + document.querySelector('img').src = newData.artists[0].strArtistThumb + document.querySelector('.words > h4').innerText = 'Related Artists' + + if(newData.artists[0].strBiographyEN.length > 250) { + const strArray = newData.artists[0].strBiographyEN.split(' ').slice(0,250).join(' ') + document.querySelector('h3').innerText = strArray + ' ...' + } else { + document.querySelector('h3').innerText = newData.artists[0].strBiographyEN + } + }) + .catch(err => console.log(err)) + + }) + .catch(err => console.log('Error: ' + err)) +} + + +//create an array with the isrc's from the spotify playlist, +// get and convert them into tidal ids +// post new playlist and patch it with new songs + +//experiment in Tidal API: multiple isrc's + +//////// TIDAL EXPERIMENTAION ///////////////// + +// const tidalAPIKey = 'E6I4SGtorVrBzt4XaEsguN5rzZQaAoGA0RpeokQXikg=' +// let TidalAccess = {"scope":"","token_type":"Bearer","access_token":"eyJraWQiOiJ2OU1GbFhqWSIsImFsZyI6IkVTMjU2In0.eyJ0eXBlIjoibzJfYWNjZXNzIiwic2NvcGUiOiIiLCJnVmVyIjowLCJzVmVyIjowLCJjaWQiOjE5ODQ5LCJleHAiOjE3NTk1Mzc5MTMsImlzcyI6Imh0dHBzOi8vYXV0aC50aWRhbC5jb20vdjEifQ.JnYWtc-mNvFvDScyGk6q-qg9ks3okJ0BIsuntLU5lnmAIqvkPcRFoE37rRZEr0nQQla5twNC9R5AF1_vmqV-Cw","expires_in":43200} + +// fetch('https://openapi.tidal.com/v2/tracks?countryCode=US&filter%5Bisrc%5D=USQX92501822', { +// headers: { +// 'Authorization':`Bearer ${TidalAccess.access_token}` +// }, +// method:'GET' +// }) +// .then(res => res.json()) +// .then(data => console.log(data)) +// .catch(err => console.log('Error: ' + err)) + +// fetch('https://openapi.tidal.com/v2/users/me', { +// method:'GET', +// headers: { +// 'Authorization':`Bearer ${TidalAccess.access_token}`, +// } +// }) +// .then(res => res.json()) +// .then(data => console.log(data)) +// .catch(err => console.log('Error: ' + err)) \ No newline at end of file