Skip to content

Commit

Permalink
Added webpage files
Browse files Browse the repository at this point in the history
  • Loading branch information
@Noah-Grimaldi
Noah-Grimaldi authored Feb 28, 2023
1 parent 35c6d6c commit b725d3b
Show file tree
Hide file tree
Showing 3 changed files with 290 additions and 0 deletions.
66 changes: 66 additions & 0 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
const titleSong = document.getElementById("stitle");
const personSong = document.getElementById("sname");
const btn = document.getElementById("submit1");

btn.addEventListener("click", () => {
const songName = document.getElementById("stitle").value;
const songArtist = document.getElementById("sname").value;
const apiKey = document.getElementById("apiKey").value;

if (songArtist.trim() !== '' || songName.trim() !== '') {
fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${songName}%20${songArtist}&type=video&key=${apiKey}`, {
method: 'GET'
})
.then((res) => res.json())
.then(data => {
console.log(data)
var vidId = data.items[0].id.videoId;

getVid(vidId, apiKey);
})
.catch((error) => {
alert('Invalid API key');
});
}
else {
alert('Fill in all the fields.')
}
function getVid(vidId, apiKey) {
fetch(`https://youtube.googleapis.com/youtube/v3/videos?part=contentDetails&id=${vidId}&key=${apiKey}`, {
method: 'GET'
})
.then((res) => res.json())
.then(data => {

var licensed_content = data.items[0].contentDetails.licensedContent;

var str = licensed_content ? 'This song is copyright' : 'This song is NOT copyrighted';
console.log(str);
document.getElementById('output').innerHTML = str;
document.getElementById("youtubePlace").src=`https://www.youtube.com/embed/${vidId}`;
})
.catch((error) => {
alert('Invalid API key');
});
}
})

titleSong.addEventListener('keydown', (e) => {
var regex = new RegExp('[a-zA-Z ]');

if (e.ctrlKey || e.altKey || typeof e.key !== 'string' || e.key.length !== 1) return;

if (!regex.test(e.key)) {
e.preventDefault();
}
});

personSong.addEventListener('keydown', (e) => {
var regex = new RegExp('[a-zA-Z ]');

if (e.ctrlKey || e.altKey || typeof e.key !== 'string' || e.key.length !== 1) return;

if (!regex.test(e.key)) {
e.preventDefault();
}
});
63 changes: 63 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKHSURBVDhPTVJBaJJhGP70/5fLFGSCHewwmZuHQBCzgYcOsmijJIYUHkwYYzkEy0HYIWo0XGTrIrRBKBjNdRiiBEaETWVlGJRhO2xjxuzgdslZ4k/m1K/nn1v0Hn7+93ue5/2e930/Qv+LtbU1h8OhUqmEQiHLshqNxu12FwqFQ/ggCP3ylZb3ms2mx+NhGAZUg8Fgt9ttNptWqyWEiEQin893SOcFlLbfpm+MWoCNjIxsbm52gE7kcjmj0QjowfVJmsvjhBfMz88PEubeVWur1Wq326lUamZmZnZ2NpvNAm00GjdN5/WEiUajvKBWq8nlcp1O18jludUMLkG9fwFjjfT7Wi7f29vb19cH5yQcDgOIxWJQuy+PniNMT0+Py+VC9xKJ5AJh7086AS0sLIC2srJCJiYmuru76/X69va2QCBQnZCWgs/AgJWtx36N8pRareY4bmdnB4Lp6WkyPDw8MDAAwvLyMo6sViut1WjkJY3FabPJK49CKpWOjY0JURWNgoqZ4ru/v09+/iJSCf5JvV6pVMrlMoaBDDQMnTidzq6uLrReKpWwLO2x4+uh552Sn70PTwoYFIalYrEIjdfrJZFIBH9LS0tgPLpiPU2EaMlisZjNZugxgye3PIDm5uZAy2QyuLauVCrRxu9Xb/5sfRsfH4dJYAiYxPpbHz/tvfugUCiweN481C/CYTNhbRcvQYx0Y2MjGAyGQiHMDWm1Wr125uyggE0mk0gJ5TgM5PbUFErq9fp0Oo0yABDoNR6P4wkCenrnLk2uHgiK3+kBw+/3i8ViYHA4NDRkMplgA6lMJltcXOQL/CjT1wkBLzqK3d3dQCCQSCQ6S+zv78dLQVfY/SGD0r+3rpRJDFdqbwAAAABJRU5ErkJggg=="/>
<title>CopyrightFinder</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body id="body1">
<header id="header2">
<h3 class="cfinder"><span id="span1">Copyright</span> <br>Finder</br></h3>
<div class="navbar">
<a class="active" href="#home">Home</a>
<a href="#How">How to use</a>
<a href="#about">About</a>
<form id="apiForm">
<label for="apiKey">YOUR API KEY:</label>
<input type="text" id="apiKey">
</form>
</div>
<h1 class="ctitle">Search for <span id="yt">Youtube</span> Copyright</h1>
</header>
<br>
<div id="div1">
<form class="form1">
<label for="stitle">Song title:</label>
<input type="text" id="stitle"><br><br>
<label for="sname">Song artist name:</label>
<input type="text" id="sname"><br><br>
<button id="submit1" type="button">Submit</button>
</form>
</div>
<div id="out">
<h2 id="output"></h2>
</div>
<iframe id="youtubePlace" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>
<hr class="hr2">
<span id="spanIn"><div id="How"><h1>How to Use</h1></div></span>
<h3>
<ul>
<li>Create an API key <a href="https://developers.google.com/workspace/guides/create-credentials#api-key">here</a></li>
<li>Copy the API key and enter it into the designated location above</li>
<li>Proceed to put in your song title and artist name</li>
</ul>
</h3>
<br><br><br><br><br>
<hr class="hr2">
<span id="span3"><div id="about"><h1>About</h1></div></span>
<p><h3>This program is designed to quickly allow you to insert a song artist and name
and get back information displaying if the song is copyrighted regarding usage on
Youtube
</h3></p>
<br><br><br><br>
<a href=#header2><p id="p3">Return to the top ^</p></a>
<div class="space"></div>
<footer id="footer1">
<p>Copyright &copy; 2023 Noah Grimaldi.</p>
</footer>
<script src="app.js"></script>
</body>
</html>
161 changes: 161 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
header {
background-color: gray;
}
body {
background-color: lightcoral;
}
.cfinder {
color: white;
font-style: italic;
letter-spacing: 2px;
font-family: 'Courier New', Courier, monospace;
}
.ctitle {
color: skyblue;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
background-color: black;

}
#yt {
color: red;
background-color: black;
}
body hr {
border: 4px solid white;
}
#span1 {
color: lime;
}
.form1 {
background-color: white;
width: 14%;
text-align: center;
font-size: 30px;
}
#stitle {
background-color: white;
border: solid 1px black;
font-size: 20px;
}
#sname {
background-color: white;
border: solid 1px black;
font-size: 20px;
}
body form label {
background-color: white;

}
#submit1 {
background-color: greenyellow;
font-size: 20px;
}
#div1 {
display:flex;
justify-content: center;
}
.navbar {
background-color: #333;
overflow: hidden;
margin-bottom: -1.2%;
}
#How {
text-align: center;
color: white;
background-color: black;
width: 10%;
}
#spanIn {
display:flex;
justify-content: center;
}
#about {
text-align: center;
color: white;
background-color: black;
width: 10%;
}
#span3 {
display:flex;
justify-content: center;
}
#output {
text-align: center;
background-color: cadetblue;
color: blue;
font-weight: bold;
width: 10%;
}
@media screen and (max-width: 1800px) {
.form1 {
width: 30%;
}
.navbar {
margin-bottom: -2.5%;
}
#How {
width: 20%;
}
#output {
width: 20%;
}
}
@media screen and (max-width: 500px) {
.form1 {
width: 70%;
}
.navbar {
margin-bottom: -5.5%;
}
#How {
width: 30%;
}
#output {
width: 50%;
}
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 19px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: blue;
color: white;
}
.hr2 {
border: solid black 2px;
}
.space {
margin-top: 600px;
}
#footer1 {
text-align: center;
font-weight: bold;
}
#p3 {
text-align: center;
font-size: 32px;
}
#apiForm {
font-size: 20px;
text-align: right;
height: 50%;
}

#out {
display:flex;
justify-content: center;
}
#youtubePlace {
display: block;
margin: 0 auto;
}

0 comments on commit b725d3b

Please sign in to comment.