This is my attempt at recreating the famous internet game: Wordle. Unlike the original game, my attempt will have multiple features such as a shuffle button where you can get a new word upon completion and a custom dictionary where users can input their own words.
Please open link on computer devices only
You can view my website using:
- Netlify: https://bespoke-parfait-0f86f8.netlify.app/
- github pages: https://atharva404.github.io/Wordle-Plus/
In this project I learned how to incorporate bootstrap elements into our own workflow. This can be seen from the navbars. I also learned how to work my way around an error through console.log() to depict where my code is not functioning. This debugging method saved me so much time.
Struggles:
-
Problem: I stuggled on how to show the messages on screen for a certain amount of time.
-
Solution: By using 'document.getElementById()' I was able to retrieve the element and alter the properties to my needs. I also figured out the benefits of setTimeout()
-
Problem: How to optimize the light and dark theme without creating two seperate html/css/javascript files
-
Solution: By using a toggle switch for the transition between light and dark mode and ':root' to host all the different colors, I was able to make the smooth transition between light and dark mode without the need of duplicate files.
-
Problem: How to incorporate bootstrap navbar
-
Solution: This was my first time using bootstrap and incorproating into my very first html/css/javascript project. I eventually figured out how to use the CDN for bootstrap and link the files onto my html website through stack overflow.
Learned:
- I learned how usefull websites such as stack overflow are to get information to solve our problems. Our simplest issues can be solved with a quick google search which can save us so much time.
- Since this was my very first project, I understood how and why Javascript is incorporated within web development and how it is a vital programming language.
- Learned how to read debug messages and how to use console.log() to narrow down the source of my error.
- Upon reserarching, I found this website that gives the hex codes for colors: coolors.co
- I learned how to use animations to flip the tiles for the letters. I thought this was very cool since this was my first time working with the animations. I also used clickEvent methods to change the color properities of the keyboard.
- Understood how to connect code with html and manipulate the attributes of texts and buttons to get the desired output through javascript.
- Another thing that I learned and thought was cool was how we can change the visibility of messages and buttons on this website through the styling feature within javascript. 'ptag.style.visibility = "visible";'
Photos of my website:
