https://github.com/subhajitroycode/lyricshot
This is fun project where you take screenshot of lyrics with various background color post it on social media
https://github.com/subhajitroycode/lyricshot
api html-css-javascript javascript lyrics-fetcher lyrics-search sass song-lyrics
Last synced: about 2 months ago
JSON representation
This is fun project where you take screenshot of lyrics with various background color post it on social media
- Host: GitHub
- URL: https://github.com/subhajitroycode/lyricshot
- Owner: subhajitroycode
- Created: 2022-06-27T15:25:27.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-09-21T07:53:35.000Z (about 3 years ago)
- Last Synced: 2023-05-17T09:13:49.155Z (over 2 years ago)
- Topics: api, html-css-javascript, javascript, lyrics-fetcher, lyrics-search, sass, song-lyrics
- Language: SCSS
- Homepage: https://lyricshot.netlify.app/
- Size: 402 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LyricshoT
This is a fun project about creating a beautiful pictures of lyrics. It is a simple web application that allows you to create a picture of your lyrics.
## Screenshots
# Overview
I got the idea of this project from a Pinterest post then I thought of making it a web application. Here you can search any songs (obviously that has to be on the spotify server) and then you can create a picture of your lyrics. [Click here](https://lyricshot.netlify.app/) to see it in action.
## My Process
### Built with
* HTML
* SASS/SCSS
* JavaScript
* API's
## The Challenge
Now the challenge is to make this responsive and mobile friendly and also to make it look nice. I also have to call two APIs the first one is to search the song and the second one is to fetch the lyrics of the song.
## Issues
There is some issues that I don't know how to fix it yet. Like I wanted a download button that can convert the html to beautiful picture and I used some libraries like html2canvas, domtoimage but in every cases either the rendering isn't good or there is issues with browser compatibility.
## What I Learned
I learned how to use the API's and how to use the libraries that I used. I also learned how to make SASS and JS more modular and reusable. I also learned how to make the vertical scrollbar hidden but still scrollable. I also learned about how to hide API keys, how to use the environment variables and how to use the environment variables in the netlify functions.
## Socials
* [Twitter](https://twitter.com/subhajitroycode)
* [LinkedIn](https://www.linkedin.com/in/subhajitroycode/)
* [Instagram](https://www.instagram.com/subhajitroycode/)