Translator design and function feedback

Hey everyone! This is my first HTML + JS + CSS project where I actually used JS and it was amazing to feel the power of JavaScript :grinning_face_with_smiling_eyes:

I would like some feedback about the CSS (I’m trying my best LOL) my JS (refactor advice and examples welcome!) and HTML(tried my best to write as semantic as posible)

Links

Codepen(for testing)

Deployed GH pages

https://bentechcoder.github.io/Aurebesh-translator/

Thanks!

1 Like

Hi @Cy499_Studios !

I think your project looks good.

Congrats! :grinning:

One thing I noticed is that you manually wrote out 26 buttons in your html to represent the letters of the english alphabet.

Instead of manually writing that out, there is a much easier way to do that.

You can dynamically add content to your markup using the map method.

I created this example, where I was able to add 10 buttons to the page using the javascript map method.
You can click on any of the buttons and it will show the correct number and text on the screen.

That’s one way to refactor your 26 buttons in the html section.

Hope that helps!

1 Like

Thanks! Btw what do you think of the css is there any way I can improve the design?

I think it would be nice if the buttons had the cursor pointer on them.