Merge a70ee19e5c into 08b771c863

Projects/1-Beginner/Periodic-Table.md

@@ -0,0 +1,43 @@
+# Periodic Table 
+
+**Tier:**  1-Beginner
+
+
+Periodic Table of elements is a tabular display of chemical elements where the elements are arranged in the increasing order of their Atomic Numbers in rows called periods. This table contains the chemical symbol, atomic mass and other properties of chemicals depending on the group in which they are placed. Many students find it difficult to memorize this table or need an interesting way to brush up on the learnt periodic table and that is where our interactive application can help them. 
+
+The Periodic Table application would require to have the following features:
+- Display the periodic table on the user interface with each element as a clickable element on the page 
+- For a better user experience add a message for the user to hover/click on the elements(depending upon the supported functionality) 
+- Allow the user to click on an element to navigate to a page with details about the chosen element
+- Alternatively, allow the user to hover over the elements to get information about the element by zooming in on the selected element's image
+
+
+Such an application can be build using the basic HTML & CSS capabilities. You can choose to use some CSS frameworks like Bootstrap to make your life easier and add that standard styling to make your application look prettier! 
+Hints: You might want to use some @media queries and pseudo selectors like :hover to implement the above mentioned features. 
+
+
+## User Stories
+
+-   [ ] User can read the instructions about the interactive behavior of your Periodic Application 
+-   [ ] User can click on his choice of element from the Periodic Table to get more information about the chemical element 
+-   [ ] User can navigate back from the detailed information page of the selected element to the main page 
+-   [ ] User can hover over the element to zoom into the element image which can better reveal the atomic number and atomic mass of the element 
+
+
+## Bonus features
+
+-   [ ] User can be provided with a timed quiz to find the prompted element within a time limit (If the user knows the atomic number, she/he will be quicker in locating the element)
+
+## Useful links and resources
+
+Following are the links to github repos that implement a similar project: 
+- https://github.com/atharva20-coder/3d-periodic-table
+- https://github.com/atharva20-coder/periodic-table
+
+
+
+## Example projects
+
+- [Modern Periodic Table] (https://modernperiodictable.netlify.app/)
+- [The Periodic Table] (https://dynamic-periodic-table.netlify.app/#)
+- [PubChem] (https://pubchem.ncbi.nlm.nih.gov/periodic-table/#view=table)