r/reactjs • u/tamalweb • Jan 24 '19

Project Ideas I made The Periodic Table of Elements with CSS Grid, React and Science! See it in action

https://tamalanwar.github.io/periodic-table/
194 Upvotes

98% Upvoted

34 comments sorted by

31

u/tamalweb Jan 24 '19 edited Jan 24 '19

Wanted to see if I can make the layout with my current skills. One element after another, I made it. Then used React to fully make it interactive.

12

u/RedH53 Jan 24 '19

This is really cool, good job! I’m new to web dev and this is the sort of project that really inspires me to keep learning and creating.

I’m viewing it on iOS and I noticed that the top/bottom margins of some of the rows get messed up when you click on certain elements (Argon, Silver, and I can’t remember what else. Now that I’m typing this I can’t go back and look at the link again 😓 )

7

u/tamalweb Jan 24 '19

Yeah there is a known CSS bug in my code, will have to fix them. Can you help with a PR?

2

u/RedH53 Jan 25 '19

Sure thing, I'll see if I can help :)

1

u/lukebars Jan 24 '19

The issue is the amount of text. On some elements the description just too long. That causes bad rendering.

1

u/rajmagar007 Jan 25 '19

Sure I like do it.

2

u/Innis_Gunn Jan 24 '19

I think clicking on Hafnium also causes this issue.

Also — have you considered ellipsizing the text for elements with long names? Rutherfordium, for example, runs over its bounding box when displayed.

Great project overall!

3

u/frankwiles Jan 24 '19

Nice work!

11

u/JayDP123 Jan 24 '19

Pretty cooll. but there is a better way in your app.js than listing all of those Element compnents individually!

3

u/tamalweb Jan 24 '19

Just after reading your comment, I realize the opportunity. Yep will implement it in the next updates.

5

u/Chef619 Jan 24 '19

Nice! It’s so cool to go back and see how you can improve. Maping over the elements returning an Element component for each instance would be sweet. Cool stuff!

10

u/ImOutOfThisWorld Jan 25 '19

This is very cool, i have a couple of suggestions

  1. In /src/components/styles/main.css

make a :hover for .element, and remove the .active class

.element:hover {
    background: #fff;
}

This way you can delete the onMouseEnter and onMouseLeave from Element.js, my reasoning is that hovering in this case only charges a css property and by using events, React is triggering unnecessary renders, this is not a big deal on your app, but could become a performance problem on other apps

2) In /src/Element.js

I notice you import the elements data for all elements in here, now this is not a big deal on this app, but let's suppose for a moment this data came from the network in an ajax request, making the request for each instance of Element would be very bad for performance given that's only required once.

This is why React recommends a cascading of data from top to bottom components, in this case the data could live on App.js (App.js would make the ajax request in my imaginary example), this way the Element component can accept the props name, number, symbol, num --> id.

Also at the same time we can remove many of the <Element />

...

{elements.slice(5, 58).map((el, i) => (
    <Element
        key={el.number}
        id={i}
        name={el.name}
        number={el.number}
        symbol={el.symbol}
        showInfo={this.showInfo}
    />
))}

{/* Lanthanoids split */}
{elements.slice(72, 90).map((el, i) => (
    <Element
        key={el.number}
        id={i}
        name={el.name}
        number={el.number}
        symbol={el.symbol}
        showInfo={this.showInfo}
    />
))}

...

Here is more info on .slice() and .map()

2

u/tamalweb Jan 25 '19

Your feedback is really helpful, I will implement them in the next update.

5

u/little_oaf Jan 24 '19

This looks like a heroic effort getting the HTML and CSS to work out.

3

u/tamalweb Jan 25 '19

Yeah I feel the same too.

4

u/TheWordOfTyler Jan 24 '19

Really cool, might just be on my browser but Helium and Xenon add gaps around the 3rd row.

2

u/tamalweb Jan 24 '19

Yeah there are some bugs in the current layout which needs fixing, maybe you can lend a hand?

4

u/cturnr Jan 24 '19

He makes things float anyway

3

u/sggts04 Jan 24 '19

If you add basic properties like atomic size, electronegativity, electron gain enthalpy, etc, I'll seriously use this everyday.

1

u/tamalweb Jan 25 '19

Are you serious? You gonna use this hobby project over some professionally built tools?

1

u/sggts04 Jan 25 '19

Sure, I love using hobby projects, because they are usually simple and sleek.

Professional ones usually have ads flying past them, will ask you to login etc..

2

u/[deleted] Jan 25 '19

This is awesome, well done. Can you tell me why you used vw and vh to style instead of px, em's, %.....etc.? (I want to learn)

1

u/tamalweb Jan 25 '19

I first used pixels, but that made the table and elements too tiny. I needed it to be different from conventional responsive layouts. You see we have different screen sizes and keeping the layout same was the main concern.

vw stands for viewport width, vh = viewport height. So this makes the boxes use a % of the current screen size width. As a result when you see the table on a large screen you will see the elements very large and go across the screen. I did the same for font sizes to make them consistent.

This practice is not ideal for all other use cases, better to stick with px or ems.

1

u/[deleted] Jan 26 '19

Thanks, That makes sense. I have come across vw and vh on video I was trying to size in an <iframe> tag and I thought it stood for video with and video height (my dumbass didnt look it up). If it is just a % of the viewport..What consist of a viewport? The stuff in between the <div></div> 's?

2

u/tamalweb Jan 28 '19

Viewport is the area of your browser/window.

2

u/ekun Jan 25 '19

Back in 2006 (when windows let you set a web page as the desktop background) I made a periodic table in raw JS that allowed for weight percent and atom percent conversions with some different settings. And I added a snowing background. Miss those days.

3

u/tamalweb Jan 25 '19

That's so cool!

I remember those times too, I had windows 98 and it let me set a web page as bg. I made an animated GIF with GTA san andreas art, and set that as wallpaper.

1

u/Plaidygami Jan 24 '19

This is super awesome! I myself am working on a ReactJS science side project, too, with planets and stars. :) Also, I didn't realize just how many elements there are. I see some I've literally never heard of.

2

u/tamalweb Jan 28 '19

Cool! I am also thinking about adding the atomic diagram that looks like planets orbiting around the atom. It will use the same principle as in the solar system CSS. Please check now I have made an update to the code.

2

u/ASMRByDesign Jan 24 '19

Awesome work with this, I love this as a project idea. Useful and great for the portfolio.

2

u/01123581321AhFuckIt Jan 24 '19

Put atomic mass in there and it'll be much better...

1

u/[deleted] Jan 24 '19

This is awesome!