Skip to content

Commit

Permalink
Merge pull request #46 from jeff-damahar/main
Browse files Browse the repository at this point in the history 
Music Player
  • Loading branch information
@shrey141102
shrey141102 authored Oct 4, 2023
2 parents 1c85502 + 7bd8ec6 commit dabdf8f
Show file tree
Hide file tree
Showing 7 changed files with 266 additions and 85 deletions.
Binary file added Music Player/Music/music.mp3
View file
Binary file not shown.
32 changes: 32 additions & 0 deletions Music Player/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Music Player

A simple music player where you can play music.


## Instruction

1. **PLAY**: By pressing play button the music will start playing.

2. **PAUSE**: By pressing pause button the music will stop playing.

3. **VOLUME**: By dragging the volume slider you can adjust volume.

## Technologies Used

This project was built using HTML, CSS, and JavaScript.

## Installation

You don't need to install anything to use this BMI. Just open the HTML file in your web browser, and you're good to go!

## Getting Started

1. Download index.html, style.css and script.js.
2. Open the "index.html" file in your web browser.
3. Start playing music.

## Contributions

- 1. [[jeff-damahar](https://github.com/jeff-damahar)]
If you'd like to contribute to this todo project or suggest improvements, please feel free to open an issue or create a pull request on the GitHub repository.

31 changes: 31 additions & 0 deletions Music Player/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Audio Player</title>
</head>

<body>
<div class="music">
<img src="https://i.pinimg.com/originals/6e/5d/03/6e5d0352f2c385fb1f88a56f0953f5dc.png" alt="" height=220
width="340" class="img">
<div class="audio-player">
<audio id="myAudio">
<source src="./Music//music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="controls">
<button id="playPause">Play</button>
</div>
</div>
<div class="volume"><span>Volume</span><input id="volume" type="range" min="0" max="1" step="0.1" value="1">
</div>
</div>
<script src="script.js"></script>
</body>

</html>
<!-- <button id="playPause">Play</button> -->
19 changes: 19 additions & 0 deletions Music Player/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
document.addEventListener('DOMContentLoaded', function () {
const audio = document.getElementById('myAudio');
const playPauseButton = document.getElementById('playPause');
const volumeSlider = document.getElementById('volume');

playPauseButton.addEventListener('click', function () {
if (audio.paused) {
audio.play();
playPauseButton.textContent = 'Pause';
} else {
audio.pause();
playPauseButton.textContent = 'Play';
}
});

volumeSlider.addEventListener('input', function () {
audio.volume = volumeSlider.value;
});
});
93 changes: 93 additions & 0 deletions Music Player/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
body {
font-family: Arial, sans-serif;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
height: 100vh;
background-image: url("https://e0.pxfuel.com/wallpapers/651/534/desktop-wallpaper-blue-background-aesthetic-computer-a-realizecolor-vercel-app-pastel-blue-aesthetic.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.music{
display: flex;
flex-direction: column;
position: relative;
animation: floatUp;
animation-duration: 5.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.img{
border-top-right-radius: 20px;
border-top-left-radius: 20px;
object-fit: cover;
border: 2px solid black;
box-shadow: 12px 12px 42px rgba(0, 0, 0, 0.356);
}
.volume{
animation: float;
animation-duration: 5.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
position: absolute;
left: -130px;
border: 2px solid black;
top:130px;
rotate: -90deg;
background-color: #ffffffcd;
display: flex;
font-size: 20px;
padding: 30px;
margin-top: 30px;
border-radius: 30px;
box-shadow: 12px 12px 42px rgba(0, 0, 0, 0.356);
}
.play{
height: 50px;
width: 50px;
border-radius: 4000px;
}
.audio-player {
width: 302px;
border-bottom: 2px solid black;
border-right: 2px solid black;
margin: 0 auto;
padding: 20px;
background-color: #ffffffe5;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 12px 12px 42px rgba(0, 0, 0, 0.356);
}

.controls {
margin-top: 10px;
}

button {
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
transition: 0.5s;
}

button:hover {
background-color: #821ad7;
transition: 0.5s;
}
@keyframes float {
0%{top:130px;}
50%{top:155px;}
100%{top:130px;}

}
@keyframes floatUp {
0%{top:0px;}
50%{top:-20px;}
100%{top:0px;}

}
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
- Quotes Generator
- Rock Paper Scissors
- URL Shortener
- Music Plyer

<h2>🍰 Contribution Guidelines:</h2>

Expand Down
175 changes: 90 additions & 85 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,125 @@
const projects=[
const projects = [
{
title:"BMI CALCULATOR",
discription: "BMI is a web-based project that offers users the ability to Calculate there Body Mass Index.",
link:"./BMI calculator/index.html",
image:"https://vitalityweightlossinstitute.com/wp-content/uploads/2023/05/bmi.png"
title: "BMI CALCULATOR",
discription: "BMI is a web-based project that offers users the ability to Calculate there Body Mass Index.",
link: "./BMI calculator/index.html",
image: "https://vitalityweightlossinstitute.com/wp-content/uploads/2023/05/bmi.png"
},
{
title:"Calculator",
discription: "Calculator project made using HTML CSS Javascript",
link:"./Calculator/index.html",
image:"https://www.cdgi.com/wp-content/uploads/2018/08/Calculator.jpg"
title: "Calculator",
discription: "Calculator project made using HTML CSS Javascript",
link: "./Calculator/index.html",
image: "https://www.cdgi.com/wp-content/uploads/2018/08/Calculator.jpg"
},
{
title:"Drum Kit",
title: "Drum Kit",
discription: "A simple web-based drum kit application built with HTML, CSS, and JavaScript. Play various drum sounds by clicking on the buttons or pressing the corresponding keys on your keyboard.",
link:"./Drum Kit/index.html",
image:"https://us.123rf.com/450wm/leonidalexeevich/leonidalexeevich2304/leonidalexeevich230400021/201521946-vector-image-of-the-drum-set.jpg?ver=6"
link: "./Drum Kit/index.html",
image: "https://us.123rf.com/450wm/leonidalexeevich/leonidalexeevich2304/leonidalexeevich230400021/201521946-vector-image-of-the-drum-set.jpg?ver=6"
},
{
title:"E-Commerce Website",
discription:"This is an E-Commerce Website Hope you like it!",
link:"./E-Commerce Website/index.html",
image:"https://5.imimg.com/data5/SELLER/Default/2022/11/TY/OY/EH/102316464/ecommerce-website-design.jpg"
title: "E-Commerce Website",
discription: "This is an E-Commerce Website Hope you like it!",
link: "./E-Commerce Website/index.html",
image: "https://5.imimg.com/data5/SELLER/Default/2022/11/TY/OY/EH/102316464/ecommerce-website-design.jpg"
},
{
title:"Guess my Number",
discription:"Welcome to the Guess the Number Game! This simple and fun game allows you to guess a number between 0 and 20. Your objective is to guess the correct number while maintaining the highest score possible. For every wrong guess, your score will decrease by 1. You can also reset the game by pressing the \"Again\" button to start over. Let's see how high you can score!",
link:"./Guess my Number/index.html",
image:"https://content.instructables.com/FGE/F6F0/K1NVATVK/FGEF6F0K1NVATVK.jpg?auto=webp"
title: "Guess my Number",
discription: "Welcome to the Guess the Number Game! This simple and fun game allows you to guess a number between 0 and 20. Your objective is to guess the correct number while maintaining the highest score possible. For every wrong guess, your score will decrease by 1. You can also reset the game by pressing the \"Again\" button to start over. Let's see how high you can score!",
link: "./Guess my Number/index.html",
image: "https://content.instructables.com/FGE/F6F0/K1NVATVK/FGEF6F0K1NVATVK.jpg?auto=webp"
},
{
title:"Happy Birthday wisher",
discription:"This is a web project that wishes you happy birthday made using html, css and js.",
link:"./Happy Birthday wisher/HBD.html",
image:"https://wishes.moonzori.com/wp-content/uploads/2022/10/Happy-Birthday-Wishes-for-Kids-Moonzori-760x428.png"
title: "Happy Birthday wisher",
discription: "This is a web project that wishes you happy birthday made using html, css and js.",
link: "./Happy Birthday wisher/HBD.html",
image: "https://wishes.moonzori.com/wp-content/uploads/2022/10/Happy-Birthday-Wishes-for-Kids-Moonzori-760x428.png"
},
{
title:"Micro Code Editor in the Browser",
discription:"This project implements a simple micro code editor in the browser using HTML, CSS, and JavaScript.",
link:"./Micro Code Editor in the Browser/index.html",
image:"https://user-images.githubusercontent.com/91379432/147645646-e60b70b4-86af-498f-b141-ffa5ccd6ce8e.PNG"
title: "Micro Code Editor in the Browser",
discription: "This project implements a simple micro code editor in the browser using HTML, CSS, and JavaScript.",
link: "./Micro Code Editor in the Browser/index.html",
image: "https://user-images.githubusercontent.com/91379432/147645646-e60b70b4-86af-498f-b141-ffa5ccd6ce8e.PNG"
},
{
title:"Stopwatch",
discription:"\"Stopwatch\" is a web-based project in wich user can track their time taken to do a activity.",
link:"./Stopwatch/index.html",
image:"https://media.istockphoto.com/id/1366275800/vector/stopwatch-timer-speed-being-held-by-a-persons-hand.jpg?b=1&s=612x612&w=0&k=20&c=-4d6m0i6z9iACH0kDAyC2p2Z-ykIJH5zHjp2303gj2Q="
title: "Stopwatch",
discription: "\"Stopwatch\" is a web-based project in wich user can track their time taken to do a activity.",
link: "./Stopwatch/index.html",
image: "https://media.istockphoto.com/id/1366275800/vector/stopwatch-timer-speed-being-held-by-a-persons-hand.jpg?b=1&s=612x612&w=0&k=20&c=-4d6m0i6z9iACH0kDAyC2p2Z-ykIJH5zHjp2303gj2Q="
},
{
title:"Temperature Converter",
discription:"In this project, user just have to type from which temperature they want to convert to which temperature. It will automatically convert the temperature from one to another.",
link:"./Temperature Converter/index.html",
image:"https://static.toiimg.com/thumb/msid-99610753,width-1280,height-720,resizemode-4/.jpg"
title: "Temperature Converter",
discription: "In this project, user just have to type from which temperature they want to convert to which temperature. It will automatically convert the temperature from one to another.",
link: "./Temperature Converter/index.html",
image: "https://static.toiimg.com/thumb/msid-99610753,width-1280,height-720,resizemode-4/.jpg"
},
{
title:"To-Do",
discription:"\"To-Do\" is a web-based project that offers users the ability to create, manage, and organize their tasks and to-do lists. \"To-Do\" help users to stay organized and productive.",
link:"./To-Do/index.html",
image:"https://play-lh.googleusercontent.com/HUuQc4Zpl6x7fUyX-jFMmcuUbW77REw4UKl5rfhHfP4VY6ctBU1w1I_RZWsXaojFgIo"
title: "To-Do",
discription: "\"To-Do\" is a web-based project that offers users the ability to create, manage, and organize their tasks and to-do lists. \"To-Do\" help users to stay organized and productive.",
link: "./To-Do/index.html",
image: "https://play-lh.googleusercontent.com/HUuQc4Zpl6x7fUyX-jFMmcuUbW77REw4UKl5rfhHfP4VY6ctBU1w1I_RZWsXaojFgIo"
},
{
title:"Simon Game",
discription:"A memory-enhancing game in JavaScript where players repeat progressively longer sequences of colors and sounds",
link:"https://shivanshsin0203.github.io/Learn_DOM_Project3/",
image:"https://user-images.githubusercontent.com/46281169/60651872-8a8c2480-9e60-11e9-9e6f-feeb76e6e159.PNG"
{
title: "Simon Game",
discription: "A memory-enhancing game in JavaScript where players repeat progressively longer sequences of colors and sounds",
link: "https://shivanshsin0203.github.io/Learn_DOM_Project3/",
image: "https://user-images.githubusercontent.com/46281169/60651872-8a8c2480-9e60-11e9-9e6f-feeb76e6e159.PNG"
},
{
title: "Quotes Generator",
discription: "The Quote Generator is a web application designed to inspire and motivate users with a collection of carefully curated quotes from various authors. Whether you're seeking wisdom, encouragement, or a moment of reflection, this application provides you with a diverse selection of quotes that can uplift your spirits and fuel your aspirations.",
link: "./Quote Generate/index.html",
image: "https://randomgenerate.io/images-large/random-quote-generator.jpg"
},
{
title:"Quotes Generator",
discription:"The Quote Generator is a web application designed to inspire and motivate users with a collection of carefully curated quotes from various authors. Whether you're seeking wisdom, encouragement, or a moment of reflection, this application provides you with a diverse selection of quotes that can uplift your spirits and fuel your aspirations.",
link:"./Quote Generate/index.html",
image:"https://randomgenerate.io/images-large/random-quote-generator.jpg"
title: "Music Player",
discription: "This music player is a web based applcation designed where you can play-pause music and adjust the volume .",
link: "./Music Player/index.html",
image: "https://beebom.com/wp-content/uploads/2016/08/10-Best-iPhone-Music-Player-Apps-You-Should-Try-in-2019.jpg?w=750&quality=75"
},

]

const cards=document.getElementsByClassName("cards")
const cards = document.getElementsByClassName("cards")

function createCard(title, discription, link, image) {
const li = document.createElement("li")
li.classList.add("cards__item")
const div1 = document.createElement("div")
div1.classList.add("card")

function createCard(title,discription,link,image){
const li=document.createElement("li")
li.classList.add("cards__item")
const div1=document.createElement("div")
div1.classList.add("card")

img = document.createElement("img")
img.classList.add("card__image")
img.src = image

img=document.createElement("img")
img.classList.add("card__image")
img.src=image
const div0 = document.createElement("div")
div0.classList.add("card__content")

const div0=document.createElement("div")
div0.classList.add("card__content")
const div = document.createElement("div")
div.classList.add("card__title")
div.innerHTML = title
div0.appendChild(div)

const div=document.createElement("div")
div.classList.add("card__title")
div.innerHTML=title
div0.appendChild(div)
const p = document.createElement("p")
p.classList.add("card__text")
p.innerHTML = discription
div0.appendChild(p)

const p=document.createElement("p")
p.classList.add("card__text")
p.innerHTML=discription
div0.appendChild(p)
const a = document.createElement("a")
a.classList.add("card__btn")
a.classList.add("btn--block")
a.classList.add("btn")
a.href = link
a.target = "_blank"
a.innerHTML = "DEMO"
div0.appendChild(a)

const a=document.createElement("a")
a.classList.add("card__btn")
a.classList.add("btn--block")
a.classList.add("btn")
a.href=link
a.target="_blank"
a.innerHTML="DEMO"
div0.appendChild(a)


div1.appendChild(img)
div1.appendChild(div0)
li.appendChild(div1)
cards[0].appendChild(li)
div1.appendChild(img)
div1.appendChild(div0)
li.appendChild(div1)
cards[0].appendChild(li)
}
projects.map((e)=>{
createCard(e.title,e.discription,e.link,e.image)
})
projects.map((e) => {
createCard(e.title, e.discription, e.link, e.image)
})

0 comments on commit dabdf8f

Please sign in to comment.