bharat-patodi / bling-app

TB3 assessment - Bling: A card making app

Requirements

1. Recreate the Bling app. Here's a video of the app. There are more visuals in the app-visuals folder.
2. Please do NOT make any changes to the CSS or the HTML file.
3. All your code goes in the app.js file.
4. Use Vanilla JS to achieve the desired results.
5. The HTML file already links to the app.js and the assets/stylesheets/styles.css. It also includes the appropriate font: Montserrat.
6. Look at the attached video and images. Try to make your app close to the one shown in there. Don't worry about completing it in totality. Even though this is a fairly simple app, to achieve this functionality solely through vanilla JS, by manipulating the DOM, is a tough task. We want to see your approach and efforts. The resultant app is a by-product.

Initial Steps

7. Create a new empty repository in your own GitHub profile. Ensure that this is an empty repository. Do not even add a Readme.md file in this. Give it the name your-github-id-bling. So, for me, this repo would be titled, bharat-patodi-bling. Make this a private repository. Even if you accidentally initialized this as a public repository, you can go in the settings and change this to be a private repository. Here is a link to know more about creating repositories. Here's the link to know how to make a repository private.
8. Add a collaborator:

   First letter of Name	Collaborator	GitHub Id
   A - M	Bharat	bharat-patodi
   N - Z	Akkshay	akkshaylawrence

9. Now, clone this repository in your own computer
10. Copy 3 things: (a) The complete assets folder (b) The app.js file (c) The index.html file from this repo(bling-app) to yours(your-github-id-bling).
11. Now in your terminal, cd to your personal repository. This is the one in which you just added all the files and the folder. Type in git status. This should show all these new files and folders that you've added.
12. Now, do git add -all, then git commit -m "Initial Commit" and git push
13. Complete all the above steps within an hour of receiving the instruction to start. This way, we get to know that you've been able to start and you don't need any assistance. Don't hesitate to ask for help. The steps can get confusing. We are all here to help!

Further ahead

14. Once you've made the initial commit, you can start working on recreating the Bling App.
15. Use the video and the visuals provided.
16. You are provided with two days to complete this assessment. There is also a third additional day as extra time. So, since this assessment is supposed to start on Monday 11 am, the cutoff time would be Thursday 11 am.
17. Please ensure that you make smaller commits. At least a couple of commits every day. This keeps your code well organized and time-stamped for us to review. Smaller sized commits are appreciated. These do not form a part of your assessment but they do give the impression that you run a tidy ship.

Assets

18. All the images used are provided in the assets/images folder.
19. The CSS file includes a CSS Reset. You need not change anything there.

Final Steps

20. Once you think your work is complete, create an issue titled, "Finish Bling App".
21. Push the last commit to GitHub and close the "Finish Bling App" issue.
22. Now, deploy your work.
23. We'll use netlify for this.
24. Go to www.netlify.com and create a new account.
25. Once your account is verified, click on the "New Site from Git" button.
26. On the next screen, 'Connect to Git Provider', choose GitHub and follow the authentication steps afterwards to link your GitHub account here.
27. Here's a link for understanding how to deploy with Netlify.
28. Name your deployment in this way: <your-github-id>-bling.netlify.app, so for me, it would be bharat-patodi-bling.netlify.app
29. If your deployment works, you should have a link for your version of the Bling App.
30. Add this to the "About" section of your repository for easy access.
31. The "About" section is the one that you normally see in the right side of a GitHub repository's main page.

Concepts Tested

A. Selecting Elements

B. Manipulating Elements

C. Event Creation

D. Event Delegation

Note

• It is important to remember that this is the assessment for HTML DOM. This is why, we want you to build the complete app using DOM manipulation.
• The focus should be on ensuring that the app works smoothly. The styling isn't totally essential. It is a good-to-have feature so first try and make the app work and then if you have time, try to recreate the styles.