Scribd
Upload
3 views11 pages

Mini Project Stage 2 - Code

The document outlines the structure and code for a web application called G-PRAC, designed to help users learn guitar. It includes HTML pages for an index, chord filters, preference selection, and results display, along with JavaScript for functionality and CSS for styling. Additionally, it provides SQL code for creating a database with tables for chords, genres, levels, skills, and songs, including sample data inserts.

Uploaded by

niahdg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views11 pages

Mini Project Stage 2 - Code

The document outlines the structure and code for a web application called G-PRAC, designed to help users learn guitar. It includes HTML pages for an index, chord filters, preference selection, and results display, along with JavaScript for functionality and CSS for styling. Additionally, it provides SQL code for creating a database with tables for chords, genres, levels, skills, and songs, including sample data inserts.

Uploaded by

niahdg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Code for GPRAC

1.​ Index Page


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>G-PRAC</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to G-PRAC!</h1>
<p>Learn guitar your way.</p>
<button onclick="window.location.href='filters.html'">Get Started</button>
</div>
</body>
</html>

2.​ First Chord Filter Page


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select the Chords You Want to Learn</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Select Chords</h2>
<form id="filter-form">
<label for="chords">Select Chords:</label>
<select id="chords" name="chords" multiple>
<option value="C">C Major</option>
<option value="Cm">C Minor</option>
<option value="D">D Major</option>
<option value="Dm">D Minor</option>
<option value="E">E Major</option>
<option value="Em">E Minor</option>
<option value="F">F Major</option>
<option value="Fm">F Minor</option>
<option value="G">G Major</option>
<option value="Gm">G Minor</option>
<option value="A">A Major</option>
<option value="Am">A Minor</option>
<option value="B">B Major</option>
<option value="Bm">B Minor</option>
</select>
<br><br>
<button type="button" onclick="goToNextPage()">Next</button>
</form>
</div>
<script>
function goToNextPage() {
window.location.href = 'otherfilts.html'; // Navigate to the second filter
page
}
</script>
</body>
</html>

3.​ Other Filters Page


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Preferences</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Select Preferences</h2>
<form id="preference-form">
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="rock">Rock</option>
<option value="pop">Pop</option>
<option value="alternative">Alternative</option>
</select>

<label for="level">Level:</label>
<select id="level" name="level">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>

<label for="skill">Technique/Skill:</label>
<select id="skill" name="skill" multiple>
<option value="barre">Barre Chords</option>
<option value="strumming">Strumming Patterns</option>
<option value="fingerpicking">Fingerpicking</option>
</select>
<br><br>
<button type="button" onclick="submitPreferences()">Find Songs</button>
</form>
</div>
<script>
function submitPreferences() {
window.location.href = 'results.html'; // Navigate to results page
}
</script>
</body>
</html>
4.​ Results Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Results</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Your Song Matches</h2>

<!-- Filters Bar -->


<div class="filters-bar">
<form id="filters-form">
<label for="genre">Genre:</label>
<select id="genre" name="genre">
<option value="">No Preference</option>
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Country">Country</option>
</select>

<label for="level">Level:</label>
<select id="level" name="level">
<option value="">No Preference</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>

<label for="skills">Skill:</label>
<select id="skills" name="skills" multiple>
<option value="Strumming">Strumming</option>
<option value="Fingerpicking">Fingerpicking</option>
<option value="Barre Chords">Barre Chords</option>
</select>

<button type="button" id="apply-filters">Apply Filters</button>


<button type="button" id="clear-filters">Clear Filters</button>
</form>
</div>

<!-- Results Section -->


<div id="results"></div>
</div>
<script src="scripts.js"></script>
</body>
</html>

5.​ Javascript code


document.addEventListener('DOMContentLoaded', function () {
const songs = [
{
name: "Wonderwall",
chords: ["C", "G", "D", "Am"],
genre: "rock",
level: "beginner",
skills: ["strumming"],
video: "https://www.youtube.com/watch?v=6hzrDeceEKc",
leadsheet: "leadsheets/wonderwall.pdf"
},
{
name: "Let It Be",
chords: ["C", "G", "Am", "F"],
genre: "pop",
level: "beginner",
skills: ["fingerpicking"],
video: "https://www.youtube.com/watch?v=2xDzVZcqtYI",
leadsheet: "leadsheets/letitbe.pdf"
},
];

const resultsDiv = document.getElementById('results');


resultsDiv.innerHTML = "";
// Replace this with actual filter criteria logic from previous pages
const filteredSongs = songs; // Placeholder: Adjust based on user input

if (filteredSongs.length > 0) {
filteredSongs.forEach(song => {
resultsDiv.innerHTML += `
<div>
<h3>${song.name}</h3>
<a href="${song.video}" target="_blank">Watch Video</a><br>
<a href="${song.leadsheet}" target="_blank">View Lead Sheet</a>
</div>
<hr>
`;
});
} else {
resultsDiv.innerHTML = "<p>No songs found that match your criteria.</p>";
}
});

6.​ CSS Styles


body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 0;
padding: 0;
}

.container {
width: 50%;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
color: #333;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
}

button:hover {
background-color: #45a049;
}

form select, form button {


width: 100%;
margin: 10px 0;
padding: 8px;
border-radius: 5px;
}

7.​ Database code

-- Create the database


CREATE DATABASE GPRAC;

-- Use the database


USE GPRAC;

-- Table for chords


CREATE TABLE Chords (
chord_id INT AUTO_INCREMENT PRIMARY KEY,
chord_name VARCHAR(50) NOT NULL UNIQUE
);

-- Table for genres


CREATE TABLE Genres (
genre_id INT AUTO_INCREMENT PRIMARY KEY,
genre_name VARCHAR(50) NOT NULL UNIQUE
);

-- Table for levels


CREATE TABLE Levels (
level_id INT AUTO_INCREMENT PRIMARY KEY,
level_name VARCHAR(50) NOT NULL UNIQUE
);

-- Table for skills


CREATE TABLE Skills (
skill_id INT AUTO_INCREMENT PRIMARY KEY,
skill_name VARCHAR(50) NOT NULL UNIQUE
);

-- Table for songs


CREATE TABLE Songs (
song_id INT AUTO_INCREMENT PRIMARY KEY,
song_name VARCHAR(100) NOT NULL,
youtube_link VARCHAR(255) NOT NULL,
lead_sheet_link VARCHAR(255),
UNIQUE(song_name, youtube_link)
);

-- Table for song-chord relationships (many-to-many)


CREATE TABLE SongChords (
song_id INT,
chord_id INT,
PRIMARY KEY (song_id, chord_id),
FOREIGN KEY (song_id) REFERENCES Songs(song_id) ON DELETE CASCADE,
FOREIGN KEY (chord_id) REFERENCES Chords(chord_id) ON DELETE CASCADE
);

-- Table for song-genre relationships (many-to-many)


CREATE TABLE SongGenres (
song_id INT,
genre_id INT,
PRIMARY KEY (song_id, genre_id),
FOREIGN KEY (song_id) REFERENCES Songs(song_id) ON DELETE CASCADE,
FOREIGN KEY (genre_id) REFERENCES Genres(genre_id) ON DELETE CASCADE
);

-- Table for song-level relationships (many-to-many)


CREATE TABLE SongLevels (
song_id INT,
level_id INT,
PRIMARY KEY (song_id, level_id),
FOREIGN KEY (song_id) REFERENCES Songs(song_id) ON DELETE CASCADE,
FOREIGN KEY (level_id) REFERENCES Levels(level_id) ON DELETE CASCADE
);

-- Table for song-skill relationships (many-to-many)


CREATE TABLE SongSkills (
song_id INT,
skill_id INT,
PRIMARY KEY (song_id, skill_id),
FOREIGN KEY (song_id) REFERENCES Songs(song_id) ON DELETE CASCADE,
FOREIGN KEY (skill_id) REFERENCES Skills(skill_id) ON DELETE CASCADE
);

-- Insert sample data into Chords


INSERT INTO Chords (chord_name) VALUES
('C'), ('G'), ('D'), ('Em'), ('Am'), ('E'), ('A'),
('F'), ('Dm'), ('Bm'), ('B'), ('Gm'), ('C7'),
('D7'), ('A7'), ('E7'), ('F#m'), ('Bb'), ('G7'),
('F7');

-- Insert sample data into Genres


INSERT INTO Genres (genre_name) VALUES
('Pop'), ('Rock'), ('Country'), ('Blues'), ('Jazz'),
('Classical'), ('Folk'), ('Reggae'), ('Metal'),
('R&B'), ('Indie');

-- Insert sample data into Levels


INSERT INTO Levels (level_name) VALUES
('Beginner'), ('Intermediate'), ('Advanced');

-- Insert sample data into Skills


INSERT INTO Skills (skill_name) VALUES
('Strumming'), ('Fingerpicking'), ('Barre Chords'),
('Soloing'), ('Chord Switching');
-- Insert sample data into Songs
INSERT INTO Songs (song_name, youtube_link, lead_sheet_link) VALUES
('Let It Be', 'https://youtu.be/2xDzVZcqtYI',
'https://example.com/let-it-be-lead-sheet'),
('Wonderwall', 'https://youtu.be/Fd9OhpddIVU',
'https://example.com/wonderwall-lead-sheet'),
('Perfect', 'https://youtu.be/2Vv-BfVoq4g', 'https://example.com/perfect-lead-sheet'),
('Shape of You', 'https://youtu.be/JGwWNGJdvx8',
'https://example.com/shape-of-you-lead-sheet'),
('Hallelujah', 'https://youtu.be/y8AWFf7EAc4',
'https://example.com/hallelujah-lead-sheet'),
('Knockin’ on Heaven’s Door', 'https://youtu.be/rq2fKfNryY8',
'https://example.com/knockin-lead-sheet'),
('Sweet Home Alabama', 'https://youtu.be/ye5BuYf8q4o',
'https://example.com/sweet-home-lead-sheet'),
('Imagine', 'https://youtu.be/YkgkThdzX-8', 'https://example.com/imagine-lead-sheet'),
('Thinking Out Loud', 'https://youtu.be/lp-EO5I60KA',
'https://example.com/thinking-out-loud-lead-sheet'),
('Hotel California', 'https://youtu.be/EqPtz5qN7HM',
'https://example.com/hotel-california-lead-sheet'),
('Smoke on the Water', 'https://youtu.be/zUwEIt9ez7M',
'https://example.com/smoke-on-water-lead-sheet'),
('Blackbird', 'https://youtu.be/Man4Xw8Xypo',
'https://example.com/blackbird-lead-sheet'),
('Tears in Heaven', 'https://youtu.be/JxPj3GAYYZ0',
'https://example.com/tears-in-heaven-lead-sheet'),
('Boulevard of Broken Dreams', 'https://youtu.be/Soa3gO7tL-c',
'https://example.com/boulevard-lead-sheet'),
('Yesterday', 'https://youtu.be/NrgmdOz227I',
'https://example.com/yesterday-lead-sheet'),
('Creep', 'https://youtu.be/XFkzRNyygfk', 'https://example.com/creep-lead-sheet'),
('Hey Jude', 'https://youtu.be/A_MjCqQoLLA',
'https://example.com/hey-jude-lead-sheet'),
('Love Yourself', 'https://youtu.be/oyEuk8j8imI',
'https://example.com/love-yourself-lead-sheet'),
('Someone Like You', 'https://youtu.be/hLQl3WQQoQ0',
'https://example.com/someone-like-you-lead-sheet'),
('All of Me', 'https://youtu.be/450p7goxZqg',
'https://example.com/all-of-me-lead-sheet');

-- Insert sample SongChords relationships


INSERT INTO SongChords (song_id, chord_id) VALUES
(1, 1), (1, 2), (1, 4), (2, 1), (2, 4),
(2, 6), (3, 5), (3, 2), (4, 4), (4, 9),
(5, 1), (5, 6), (6, 3), (6, 7), (6, 8),
(7, 2), (7, 10), (8, 1), (8, 11), (9, 4);

-- Insert sample SongGenres relationships


INSERT INTO SongGenres (song_id, genre_id) VALUES
(1, 1), (2, 1), (3, 1), (4, 1), (5, 6),
(6, 3), (7, 2), (8, 2), (9, 1), (10, 2),
(11, 2), (12, 6), (13, 5), (14, 4), (15, 1),
(16, 1), (17, 2), (18, 2), (19, 1), (20, 1);

-- Insert sample SongLevels relationships


INSERT INTO SongLevels (song_id, level_id) VALUES
(1, 1), (2, 1), (3, 2), (4, 2), (5, 3),
(6, 2), (7, 2), (8, 1), (9, 1), (10, 2),
(11, 2), (12, 3), (13, 3), (14, 2), (15, 1),
(16, 2), (17, 3), (18, 2), (19, 1), (20, 1);

-- Insert sample SongSkills relationships


INSERT INTO SongSkills (song_id, skill_id) VALUES
(1, 1), (2, 3), (3, 1), (4, 2), (5, 4),
(6, 5), (7, 1), (8, 3), (9, 2), (10, 4),
(11, 1), (12, 5), (13, 3), (14, 1), (15, 2),
(16, 3), (17, 5), (18, 4), (19, 2), (20, 1);

-- Verify data
SELECT * FROM Songs;
SELECT * FROM Chords;
SELECT * FROM Genres;
SELECT * FROM Levels;
SELECT * FROM Skills;

You might also like