{"id":25265,"date":"2024-01-30T06:04:10","date_gmt":"2024-01-30T05:04:10","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/construye-tu-propia-tabla-periodica-interactiva-con-html-css-y-js\/"},"modified":"2024-06-03T17:40:17","modified_gmt":"2024-06-03T16:40:17","slug":"construye-tu-propia-tabla-periodica-interactiva-con-html-css-y-js","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/","title":{"rendered":"Build Your Own Interactive Periodic Table with HTML, CSS and JS"},"content":{"rendered":"<p>Chemistry is a fascinating science and exploring its elements through a digital periodic table can be an extremely enriching experience for students and hobbyists alike. With today&#039;s web technologies, developing an interactive periodic table can be an exciting and educational project. This tutorial will guide you through the steps necessary to create your own interactive periodic table, using HTML, CSS and JavaScript.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/#Conceptualizando_Nuestra_Tabla_Periodica_Interactiva\" >Conceptualizing Our Interactive Periodic Table<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/#Disenando_el_Layout_en_HTML\" >Designing the Layout in HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/#Estilizando_con_CSS\" >Styling with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/#Anadiendo_Interactividad_con_JavaScript\" >Adding Interactivity with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/#Mejorando_la_Experiencia_del_Usuario\" >Improving User Experience<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/#Consejos_Practicos_para_Llevar_tu_Proyecto_al_Siguiente_Nivel\" >Practical Tips to Take Your Project to the Next Level<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/build-your-own-interactive-periodic-table-with-html-css-and-js\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Conceptualizando_Nuestra_Tabla_Periodica_Interactiva\"><\/span>Conceptualizing Our Interactive Periodic Table<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before diving into the code, we need to conceptualize our periodic table. We want each element to be easily identifiable and that when clicking on one of them, the user obtains more information. We should think about displaying relevant data, such as the atomic number, weight, group and period, and chemical properties of each element.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Disenando_el_Layout_en_HTML\"><\/span>Designing the Layout in HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To design our periodic table we will use HTML. The basic structure will look like the following code example:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;div class=&quot;table-periodica&quot;&gt;\n  &lt;!-- Elementos de la tabla --&gt;\n  &lt;div class=&quot;elemento&quot; data-numero=&quot;1&quot; data-simbolo=&quot;H&quot;&gt;\n    &lt;div class=&quot;info-basica&quot;&gt;\n      1 HOUR\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;!-- Repetir para el resto de los elementos --&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>With this, we create a container div for our table and individual divs for each of the elements, where <code>data-number<\/code> y <code>data-symbol<\/code> They contain key information about the element. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Estilizando_con_CSS\"><\/span>Styling with CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The appearance of our periodic table is crucial to making it intuitive and easy to use. With CSS, we can define how each element looks and the general layout. Here is an example of how to apply styles to our table:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); gap: 10px; } .element { border: 1px solid #cccccc; text-align: center; padding: 10px; cursor: pointer; }<\/code><\/pre>\n<p>With the previous code, we use grid layout to arrange the elements in a way that resembles the conventional periodic table and we give a basic style to each element so that it is visually distinguished. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Anadiendo_Interactividad_con_JavaScript\"><\/span>Adding Interactivity with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To make our table interactive, we need to use JavaScript. We are going to add an event listener to each element, which will display a tooltip when the user clicks on it.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.querySelectorAll(&#039;.elemento&#039;).forEach(function(element) { element.addEventListener(&#039;click&#039;, function() { \/\/ Here we would put the logic to display the element information var number = this.dataset. number; var symbol = this.dataset.symbol; showElementInformation(number, symbol); function showElementInformation(number, symbol) { \/\/ Search for information based on the number or symbol and display it in a popup window }<\/code><\/pre>\n<p>This code is still incomplete, but it provides the basis for linking user actions to our chemical data.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Mejorando_la_Experiencia_del_Usuario\"><\/span>Improving User Experience<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Paying attention to details often makes the difference in the user experience. We can add subtle animations when a user hovers their mouse over an element, or even adjust the colors of each element based on its chemical category using CSS:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.element:hover { transform: scale(1.05); border-color: #333333; } \/* Chemical category classes *\/ .metal { background-color: #ffd700; } .no-metal { background-color: #90ee90; }<\/code><\/pre>\n<p>And we can add these classes to the corresponding elements in our HTML. For example, <code>&lt;div class=&quot;elemento no-metal&quot; data-numero=&quot;7&quot; data-simbolo=&quot;N&quot;&gt;<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Consejos_Practicos_para_Llevar_tu_Proyecto_al_Siguiente_Nivel\"><\/span>Practical Tips to Take Your Project to the Next Level<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<p><strong>dynamic data<\/strong>: Consider using an API or JSON file to load element data dynamically. This way, your table will be easy to update and maintain.<\/p>\n<\/li>\n<li>\n<p><strong>Accessibility<\/strong>: Don&#039;t forget to include attributes <code>aria-*<\/code> and correctly handle the keyboard and touch events so that your periodic table is accessible to all users.<\/p>\n<\/li>\n<li>\n<p><strong>Testing and Feedback<\/strong>: Test your periodic table with real users. Feedback is essential to polish and improve the experience.<\/p>\n<\/li>\n<li>\n<p><strong>Document your code<\/strong>: Comment your code to make it understandable, which will be useful if you decide to make your project open source or if you work with a team.<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Creating an interactive periodic table as a personal or educational project is a great way to combine learning chemistry with your web development skills. By following the steps and tips provided in this article, you will be able to develop a useful and engaging educational resource. Remember, you can always improve and expand your project with new features such as an element search engine or links to scientific articles for each element in the table.<\/p>\n<p>And don&#039;t forget to share your progress or ask any questions by visiting <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> or through the page <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact<\/a>. Let&#039;s get to work and happy coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>Chemistry is a fascinating science, and exploring its elements through a digital periodic table can be an extremely enriching experience for both students and hobbyists. With today&#039;s web technologies, developing an interactive periodic table can be an exciting and educational project. This tutorial will guide you through the steps [\u2026]<\/p>","protected":false},"author":1,"featured_media":25266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,90,1643,519,475,1544,783,1766,781],"class_list":["post-25265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-con","tag-construye","tag-css","tag-html","tag-interactiva","tag-periodica","tag-propia","tag-tabla"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=25265"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/25265\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/25266"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=25265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=25265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=25265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}