Rate song button (#245)

fixes #244 * Basic button in main page, add basic form to rate. Need to add the button in all song pages in lyrics directory. * chore: Add font awesome to every page in the lyrics directory. * chore: Add rate song btn to all pages in lyrics directory. * Basic test for Netlify forms. * Add option value as song name. The song name currently shows as [song] on netlify, instead of the song name rated.
KendallDoesCoding · Mar 12, 2022 · 21c5458 · 21c5458
1 parent b45166e
commit 21c5458
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -61,13 +61,16 @@ <h1 class="heading">A very Mogul Christmas</h1>
       <div class="you-may-like">
          <p class="yml"><a href="/you-may-like" target="_blank">If you liked this album, You May Also Like</a></p>
       </div>
+      <div class="rate-song">
+         <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
+      </div>
       <div class="other-pro">
          <p class="otherprojects"><a href="/otherprojects" target="_blank">Other Similar Projects</a></p>
+      </div>
          <div class="socials">
             <div class="social">
                <i id="grey" class="fab fa-github"></i>
             </div>
-         </div>
       </div>
   <div class="christmas-tree-images">
      <div class="image-a">

diff --git a/lyrics/alliwantforchristmas/index.html b/lyrics/alliwantforchristmas/index.html
@@ -6,6 +6,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Lyrics - All I Want For Christmas</title>
       <link rel="stylesheet" href="/styles.css">
+      <script src="https://kit.fontawesome.com/72f2609661.js" crossorigin="anonymous"></script>
    </head>
    <body>
       <div id="header">
@@ -30,6 +31,9 @@ <h1 class="heading"> All I Want For Christmas Lyrics</h1>
    <div id="download-lyrics" class="button1">
       <a href="lyrics.txt" download="all_i_want_for_christmas">Download Lyrics</a>
       </div>
+      <div class="rate-song">
+         <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
+      </div>   
    </body>
   <div class="christmas-tree-images">
      <div class="image-a">

diff --git a/lyrics/babyitscoldoutside/index.html b/lyrics/babyitscoldoutside/index.html
@@ -6,6 +6,8 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Lyrics - Baby It's Cold Outside</title>
       <link rel="stylesheet" href="/styles.css">
+      <script src="https://kit.fontawesome.com/72f2609661.js" crossorigin="anonymous"></script>
+
    </head>
    <body>
       <div id="header">
@@ -30,6 +32,9 @@ <h1 class="heading"> Baby It's Cold Outside Lyrics</h1>
    <div id="download-lyrics" class="button1">
       <a href="lyrics.txt" download="baby_its_cold_outside">Download Lyrics</a>
       </div> 
+      <div class="rate-song">
+         <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
+      </div>
    </body>
    <div class="christmas-tree-images">
      <div class="image-a">

diff --git a/lyrics/christmassong/index.html b/lyrics/christmassong/index.html
@@ -6,6 +6,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Lyrics - The Christmas Song</title>
       <link rel="stylesheet" href="/styles.css">
+      <script src="https://kit.fontawesome.com/72f2609661.js" crossorigin="anonymous"></script>
    </head>
    <body>
       <div id="header">
@@ -30,6 +31,9 @@ <h1 class="heading"> The Christmas Song Lyrics</h1>
    <div id="download-lyrics" class="button1">
       <a href="lyrics.txt" download="christmas_song">Download Lyrics</a>
       </div> 
+      <div class="rate-song">
+         <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
+      </div>
    </body>
    <div class="christmas-tree-images">
      <div class="image-a">

diff --git a/lyrics/lastchristmas/index.html b/lyrics/lastchristmas/index.html
@@ -6,6 +6,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Lyrics - Last Christmas</title>
       <link rel="stylesheet" href="/styles.css">
+      <script src="https://kit.fontawesome.com/72f2609661.js" crossorigin="anonymous"></script>
    </head>
    <body>
       <div id="header">
@@ -29,7 +30,10 @@ <h1 class="heading"> Last Christmas Lyrics</h1>
    </div>
    <div id="download-lyrics" class="button1">
       <a href="lyrics.txt" download="last_christmas">Download Lyrics</a>
-      </div> 
+   </div>
+   <div class="rate-song">
+      <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
+   </div>
    </body>
    <div class="christmas-tree-images">
      <div class="image-a">

diff --git a/lyrics/littlesaintnick/index.html b/lyrics/littlesaintnick/index.html
@@ -6,6 +6,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Lyrics - Little Saint Nick</title>
       <link rel="stylesheet" href="/styles.css">
+      <script src="https://kit.fontawesome.com/72f2609661.js" crossorigin="anonymous"></script>
    </head>
    <body>
       <div id="header">
@@ -30,6 +31,9 @@ <h1 class="heading">Little Saint Nick Lyrics</h1>
    <div id="download-lyrics" class="button1">
       <a href="lyrics.txt" download="little_saint_nick">Download Lyrics</a>
       </div>
+      <div class="rate-song">
+         <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
+      </div>
    </body>
    <div class="christmas-tree-images">
      <div class="image-a">

diff --git a/lyrics/wonderfultimeoftheyear/index.html b/lyrics/wonderfultimeoftheyear/index.html
@@ -6,6 +6,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Lyrics - The Most Wonderful Time Of The Year</title>
       <link rel="stylesheet" href="/styles.css">
+      <script src="https://kit.fontawesome.com/72f2609661.js" crossorigin="anonymous"></script>
    </head>
    <body>
       <div id="header">
@@ -30,6 +31,9 @@ <h1 class="heading">The Most Wonderful Time Of The Year Lyrics</h1>
       <div id="download-lyrics" class="button1">
       <a href="lyrics.txt" download="wonderful_time_of_the_year">Download Lyrics</a>
       </div> 
+      <div class="rate-song">
+         <p class="rate"><a href="/rating" target="_blank">Rate Song<i id="star" class="fas fa-star"></i></a></p>
+      </div>
    </body>
   <div class="christmas-tree-images">
      <div class="image-a">

diff --git a/rating/index.html b/rating/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Rate Song</title>
+  </head>
+  <body>
+    <form name="contact" netlify>
+      <p>
+        <label class="song-name"
+          >Song Name:
+          <select name="song[]" multiple required>
+            <option value="christmas-song">Christmas Song</option>
+            <option value="baby-it's-cold-outside">Baby It's Cold Outside</option>
+            <option value="the-most-wonderful-time-of-the-year">The Most Wonderful Time of The Year</option>
+            <option value="last-christmas">Last Christmas</option>
+            <option value="little-saint-nick">Little Saint Nick</option>
+            <option value="all-i-want-for-christmas">All I Want For Christmas</option>
+          </select></label
+        >
+      </p>
+      <p>
+        <label class="rating"
+          >Rating - Out of 10 <input type="number" name="number" min="0" max="10" required/></label
+        ></label>
+      </p>
+      <p>
+        <button class="btn" type="submit">Submit Rating</button>
+      </p>
+    </form>
+  </body>
+</html>
diff --git a/rating/styles.css b/rating/styles.css
@@ -0,0 +1,44 @@
+.song-name,
+.rating {
+  color: limegreen;
+}
+
+.song-name {
+  width: 200px;
+}
+
+input {
+  color: red;
+}
+
+.btn {
+  background-image: linear-gradient(
+    to right,
+    #d31027 0%,
+    #ea384d 51%,
+    #d31027 100%
+  );
+}
+.btn {
+  margin: 10px;
+  padding: 15px 45px;
+  text-align: center;
+  text-transform: uppercase;
+  transition: 0.5s;
+  background-size: 200% auto;
+  color: white;
+  box-shadow: 0 0 20px #eee;
+  border-radius: 10px;
+  display: block;
+}
+
+.btn:hover {
+  background-position: right center; /* change the direction of the change here */
+  color: #fff;
+  text-decoration: none;
+}
+
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
diff --git a/styles.css b/styles.css
@@ -16,6 +16,7 @@
   --font-color-christmas_message: violet;
   --lyrics-text-color: #1abc9c;
   --yml-btn: #1abc9c;
+  --rate-song-btn: purple;
   --grey: black;
   font-family: "Roboto", sans-serif;
 }
@@ -32,6 +33,7 @@
   --font-color-christmas_message: pink;
   --lyrics-text-color: lime;
   --yml-btn: yellow;
+  --rate-song-btn: purple;
   --grey: grey;
   font-family: "Roboto", sans-serif;
 }
@@ -93,6 +95,10 @@ body {
   color: red;
 }
 
+#star {
+  color: yellow;
+}
+
 #grey {
   color: var(--grey);
 }
@@ -115,6 +121,11 @@ body {
   text-decoration: none;
 }
 
+.rate-song {
+  color: var(--rate-song-btn);
+  text-decoration: none;
+}
+
 .lyrics-lud {
   color: var(--font-color-blue);
 }
@@ -431,6 +442,18 @@ a:active {
   text-decoration: none;
 }
 
+.rate a:link {
+  text-decoration: none;
+}
+
+.rate a:visited {
+  text-decoration: none;
+}
+
+.rate a:hover {
+  text-decoration: none;
+}
+
 .random-song {
   color: #ffa500;
 }