suvelocity · MaorKurztag21 · Sep 12, 2021 · Sep 12, 2021 · Sep 13, 2021 · Sep 13, 2021
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,36 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+ # Triggers the workflow on push or pull request events but only for the main branch
+ push:
+ branches: [ main ]
+ pull_request:
+ branches: [ main ]
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+ # This workflow contains a single job called "build"
+ build:
+ # The type of runner that the job will run on
+ runs-on: ubuntu-latest
+
+ # Steps represent a sequence of tasks that will be executed as part of the job
+ steps:
+ # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+ - uses: actions/checkout@v2
+
+ # Runs a single command using the runners shell
+ - name: Run a one-line script
+ run: echo Hello, world!
+
+ # Runs a set of commands using the runners shell
+ - name: Run a multi-line script
+ run: |
+ echo Add other actions to build,
+ echo test, and deploy your project.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -9,9 +9,11 @@
  <script src="./scripts/index.js" defer></script>
  </head>
  <body>
+ <h1>New MP3 Player</h1>
  <div id="songs">
- <!-- Generated songs go here -->
+
  </div>
+ <h2>Playlists</h2>
  <div id="playlists">
  <!-- Generated playlists go here -->
  </div>

diff --git a/scripts/index.js b/scripts/index.js
@@ -1,47 +1,74 @@
 /**
+ * 
  * Plays a song from the player.
  * Playing a song means changing the visual indication of the currently playing song.
  *
  * @param {String} songId - the ID of the song to play
  */
-function playSong(songId) {
- // Your code here
+ function playSong(songId) {
+ let notChosens = document.getElementsByClassName('songShell');
+ for(let notChosen of notChosens){
+ notChosen.style.backgroundColor = "rgba(0, 0, 0, 0)";
+ }
+ document.getElementById(songId).style.backgroundColor ="hsla(50, 33%, 25%, .75)";
 }
 
 /**
- * Creates a song DOM element based on a song object.
- */
+* Creates a song DOM element based on a song object.
+*/
 function createSongElement({ id, title, album, artist, duration, coverArt }) {
- const children = []
- const classes = []
- const attrs = { onclick: `playSong(${id})` }
- return createElement("div", children, classes, attrs)
+ let SongTitle = createElement('h2',[title],['songTitles']);
+ let songAlbum = createElement('h3',["Album: " + album]);
+ let songArtist = createElement('h4',["Artist: " + artist]);
+ let songDuration = createElement('h4',[secondsToMinutesConvertor(duration)]);
+ let songCoverArt = createElement('img',[],[],{src: coverArt})
+ let songElement = createElement('div',[SongTitle, songAlbum, songArtist, songDuration, songCoverArt],['songShell'],{id: id});
+ console.log(songElement);
+ songElement.setAttribute('onclick', `playSong(${id})`)
+ return songElement;
+ }
+for(let song of player.songs){
+ let songsDiv = document.getElementById('songs');
+ songsDiv.append(createSongElement(song));
 }
-
 /**
- * Creates a playlist DOM element based on a playlist object.
- */
+* Creates a playlist DOM element based on a playlist object.
+*/
 function createPlaylistElement({ id, name, songs }) {
- const children = []
- const classes = []
- const attrs = {}
- return createElement("div", children, classes, attrs)
+ let playlistName = createElement('h2',[name]);
+ let playlistSongs = createElement('h3',["Amount of songs: " + songs.length]);
+ let playlistFulllDuration = createElement('h3',["Duration - " + playlistDuration(id)]);
+ let playlistElem = createElement('div',[playlistName, playlistSongs, playlistFulllDuration],['playlistShell']);
+ return playlistElem;
+}
+for(let playlist of player.playlists){
+ let playlistList = document.getElementById('playlists');
+ playlistList.append(createPlaylistElement(playlist));
 }
-
 /**
- * Creates a new DOM element.
- *
- * Example usage:
- * createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"})
- *
- * @param {String} tagName - the type of the element
- * @param {Array} children - the child elements for the new element.
- * Each child can be a DOM element, or a string (if you just want a text element).
- * @param {Array} classes - the class list of the new element
- * @param {Object} attributes - the attributes for the new element
- */
+* Creates a new DOM element.
+*
+* Example usage:
+* createElement("div", ["just text", createElement(...)], ["nana", "banana"], {id: "bla"})
+*
+* @param {String} tagName - the type of the element
+* @param {Array} children - the child elements for the new element.
+* Each child can be a DOM element, or a string (if you just want a text element).
+* @param {Array} classes - the class list of the new element
+* @param {Object} attributes - the attributes for the new element
+*/
 function createElement(tagName, children = [], classes = [], attributes = {}) {
- // Your code here
+let newEl = document.createElement(tagName);
+for(let child of children){
+ newEl.append(child);
+}
+for(let cls of classes){
+ newEl.classList.add(cls);
+}
+for(let attr in attributes){
+ newEl.setAttribute(attr, attributes[attr]);
+}
+return newEl
 }
+createSongElement('h2', [player.songs[0].title], "songTitles");
 
-// You can write more code below this line
diff --git a/scripts/player.js b/scripts/player.js
@@ -31,34 +31,98 @@ const player = {
  artist: "AC/DC",
  duration: 292,
  coverArt: "./images/cover_art/acdc_thunderstruck.jpg",
- },
- {
+  },
+  {
  id: 4,
  title: "All is One",
  album: "All is One",
  artist: "Orphaned Land",
  duration: 270,
  coverArt: "./images/cover_art/orphaned_land_all_is_one.jpg",
- },
- {
+  },
+  {
  id: 5,
  title: "As a Stone",
  album: "Show Us What You Got",
  artist: "Full Trunk",
  duration: 259,
  coverArt: "./images/cover_art/full_trunk_as_a_stone.jpg",
- },
- {
+  },
+  {
  id: 6,
  title: "Sons of Winter and Stars",
  album: "Time I",
  artist: "Wintersun",
  duration: 811,
  coverArt: "./images/cover_art/wintersun_sons_of_winter_and_stars.jpg",
- },
- ],
- playlists: [
- { id: 1, name: "Metal", songs: [1, 7, 4, 6] },
- { id: 5, name: "Israeli", songs: [4, 5] },
- ],
-}
+ },
+ ],
+ playlists: [
+ { id: 1, name: "Metal", songs: [1, 7, 4, 6] },
+ { id: 5, name: "Israeli", songs: [4, 5] },
+ ],
+ }
+ //External Functions
+ function secondsToMinutesConvertor(songDuration){
+ if(typeof(songDuration) === 'number'){
+ let min = Math.floor(songDuration / 60);
+ let sec = songDuration % 60;
+ if (min < 10) {
+ min = "0" + min;
+ }
+ if (sec < 10) {
+ sec = "0" + sec;
+ }
+ return min.toString() + ':' + sec.toString();
+ }
+ else{
+ return parseInt(songDuration.slice(3)) + parseInt(songDuration.slice(0,2)) * 60;
+ } 
+ }
+
+ function getPlaylistById(id){
+ let playlistId = player.playlists.filter(playlist =>{
+ if(playlist.id === id){
+ return playlist;
+ }
+ })
+ return playlistId[0];
+ }
+
+ function playlistDuration(id) {
+ let WantedPlaylist = getPlaylistById(id);
+ let songsArray = WantedPlaylist.songs.map(song => {
+ return getSongObjectById(song).duration})
+ let totalDuration = (songsArray.reduce((added, currentValue) => {
+ currentValue += added;
+ return currentValue;
+ }))
+ return secondsToMinutesConvertor(totalDuration);
+ }
+
+ function generateId(idArr,id){
+ let newArr=[];
+ for(let i of arr){
+ newArr.push(i.id);
+ }
+ } 
+
+ function getSongObjectById(id){
+ let song = player.songs.filter(songObject => {
+ if(songObject.id == id){
+ return songObject;
+ }
+ })
+ if(song.length == undefined){
+ throw new Error ("id is undefined");
+ }
+ song = song[0];
+ return song;
+ } 
+
+ function convertToseconds(mmssDuration){
+ let minutes = Number(mmssDuration.split("").slice(0, 2).join(""));
+ let seconds = Number(mmssDuration.split("").slice(3, 5).join(""));
+ let time = (minutes * 60) + seconds;
+ return time;
+ }
diff --git a/style.css b/style.css
@@ -1 +1,58 @@
-/* Your code here */
+body{
+ font-family: sans-serif;
+ background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
+}
+h1{
+ color: rgba(5, 56, 25, 0.637);
+ text-decoration: underline;
+ text-align: center;
+ font-size: 100px;
+ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+}
+.songShell{
+border: 7px solid rgb(224, 19, 104);
+border-width: 3px;
+border-color: darkgoldenrod;
+align-items: center;
+margin-right: 100px;
+margin-left: 300px;
+margin-top: 100px;
+margin-bottom: 50px;
+}
+.playlistShell {
+ border: 10px double rgb(95, 84, 158);
+ border-radius: 10%;
+
+} 
+.songShell img{
+ border-radius: 20%;
+ display: block;
+ margin-left: auto;
+ margin-right:80px;
+ padding-top: 30px;
+ padding-right: 100px;
+ padding-bottom: 40px;
+
+}
+.playlistShell h3{
+ color: blue;
+ font-family: verdana;
+ font-size: 100%;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+div{
+ color:darkviolet;
+ font-size: 20px;
+}
+h2{
+ font-size: 60px;
+ font-family: monospace;
+}
+h3{
+ font-size: 40px;
+}
+h4{
+ font-size: 30px;
+ font-family: cursive;
+}