Git Product home page Git Product logo

front-end-project's Introduction

Alpha Music



Checklist ๐Ÿ“‹


Your task is to build something awesome with your team!

You'll be using the front-end skills you've developed over the last several weeks. Each team must present their project and each team member must have a presenting role. Technical Requirements Implement a Responsive Design that works on Chrome on OSX, iOS devices, and Android devices. Access at least 2 remote APIs (data mashup!) HTML is well structured Javascript loads correctly and doesn't have any console errors.


Work in groups Use agile methodolgy (daily standups) Create github repo (add all group members as collaborators) Collaborate using PRs (Pull Requests), making sure to tag a reviewer for approval Reviewer must code review through Github and approve before the PR can be merged. If there are no comments, the code has spaghetti, or has difficult to read spots, code review didn't happen.

Use a feature tracking system, such as: Github Projects or Trello.



About our project ๐Ÿ“


Alpha music was created for the user to be able to look at top hits, information about the artist, lyrics for their favorite song and ways to search albums by a certain artist. Alpha Music has a very simple and easy user interface, being able to click their song they searched to get to lyrics and how many plays it has, to being able to find more music by the artist by clicking the links provided at the bottom of each album picture .



languages Used and technology ๐Ÿ’ป



HTML5

JavaScript

Bootstrap

CSS3




Code snipets


This is an example of our album API function.

function renderAlbum(albumArray) {
    const albumHTMLArray = albumArray.map(function (currentAlbum) {
        return ` <div class="cardClass">
        <div class="card" style="width: 18rem;">
        <img src="${currentAlbum.image[3]['#text']}" class="card-img-top" alt="...">
        <div class="card-body">
        <h5 class="card-title">${currentAlbum.name}</h5>
        <p class="card-text">${currentAlbum.artist.name}</p>
        <a href="${currentAlbum.artist.url}"> <p  card="card-text">${currentAlbum.artist.url} </a></p>
        </div>
        </div>
        </div>
        </a>`

    })
    return albumHTMLArray.join('')


List of API's used





Group




License


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.