This assignment challenges you to build a website that displays the periodic table of elements.

Learning Objectives:

$$ Apply HTML for creating the basic structure of the web page.

$$ Utilize CSS to style the website and the periodic table layout.

$$ Incorporate JavaScript for interactivity $($e$.$g$.,$ element information on click$).$

Requirements:

$$ Basic Structure:

o Create an HTML document for the website.

o Design a user$-$friendly layout for the periodic table. This can be a simple table

structure or a more creative grid$-$based layout.

o Include a title for the website, such as "Periodic Table Explorer".

$$ Visual Design:

o Use CSS to style the website.

o Ensure the periodic table is clear and easy to read. Consider using different colors

or backgrounds for different element groups $($metals$,$ non$-$metals, etc.$).$

o You can add a legend explaining the color scheme used.

$$ Element Information:

o Implement JavaScript to display additional information about an element when

the user clicks on its box in the periodic table. This information could include:

$$ Element symbol

$$ Atomic number

$$ Atomic Weight

$$ Element name

Don$$t use any CSS libraries like bootstrap etc. you will lose $5$ points if such libraries are

used.

Deliverables:

$$ A well$-$structured and commented HTML file.

$$ A CSS file containing the styles for the website.

$$ A JavaScript file containing the code for element information display.

$$ A functional website that displays the periodic table.

Grading Rubric:

$$ Functionality $(5$ points$)$:

o Website displays the periodic table correctly. $(2$ points$)$

o Elements are clearly identified with symbol and name. $(1\mathrm{.}5$ points$)$

o Clicking on an element displays additional information. $(1\mathrm{.}5$ points$)$

$$ Design $(3$ points$)$:

o Website is visually appealing. $(1\mathrm{.}0$ point$)$

o Consistent and clear use of color scheme for element groups. $(1\mathrm{.}0$ point$)$

o Proper use of CSS for layout and styling. $(1\mathrm{.}0$ point$)$

$$ Code Quality and Accessibility $(2$ points$)$:

o Code is well$-$structured, commented, and easy to understand. $(1\mathrm{.}0$ points$)$

o Accessibility check will be performed by the Graders using the checker as

explained in the Assignment $1$ you will lose $0\mathrm{.}5$ marks for errors even you have

one error; warnings are OK $(1\mathrm{.}0$ points$).$