After finally being introduced to the final coding set, Javascript in web development thoroughly for a week, we were tasked with a small project in which challenged our new knowledge and skill. In groups we were to find a website in which we could re-implement Javascript elements along with HTML and CSS. Each team member would have to create their own element (JS) which consisted most or try to consist most of the pensum.
After searching countless websites to use, we settled on using one of our team members website she created for her exam project in the first semester. One of the main reasons for doing this is that we had easy access to the code and we wouldn’t have to dissect it from the internet and second guess ourselves.
Individually we brainstormed what kind of javascript element we wanted to create and implement in the website, and research and experiment with the code to make improvements are look for other elements to try out.
To ensure we wouldn’t override each other the the documents in visual studio, we allocated different areas using the comment tag and our name and worked within those areas only. We also created individual documents for each persons javascript element for organisation and simplicity.
My first idea was to create a toggle button in which changes the colour of the background and text between light and dark mode. I thought this was a neat idea as my team members website was already a prominent dark theme, and would add a nice contrast with a light theme toggle button. We worked on something similar in class in which when you clicked a button it changed colour each time. I used the foundation from that to guide be through the toggle button as well as using youtube tutorials.
However through countless tries I could only get the background to change colour, but it wasen’t that visible due to the containers placed above which made it a big challenge for me and I decided to drop it.
I did some research on what kind of js elements would be cool to implement in the website. This ranged from tic-tac-toe games, count down timers, or a simple animation. I settled on a count down timer as I could create value with implementing it, which would be showcasing the time until we graduated from multimedia design.
I had no idea how to create such thing, so I relied on different youtube videos to guide me through the process but also help me through my errors. I made sure I understood the code I was writing, and luckily for me since it consisted of mathematical components it was a lot easier to comprehend. One of the main errors I ran into was due to my case sensitive error. The most basic rule was ignored with one work in my code and therefore did not allow my code to run properly. The simple fix was changing Seconds -> seconds.
When we came closer to the deadline we looked at each others creations from an image carousel and a 3D looking landing page. We looked at each others worked and see which one has all the requirements or nearly meet all the requirements of the pensum. We realised my element consist most but were missing some simple implementations, and my team mates helped to fill those gaps in so we had a complete pensum element. We also looked over the code a couple time to ensure we understood what we wrote and that it met the requirements.
The final part to this project was simply to showcase the website in a video, dive deeper into one of the js elements and show the code and explain it.
This mini project was very beneficial as many of us were challenged with js. Having others around you allows you to ask for help, help others, be confused, and make mistakes comfortably. Even though we aren’t experts in this we used the knowledge and skills we have to help each others as much as possible.
Link to the interactive prototype:
https://alexandrasorensen.dk/javascrips/gruppe-4/om-mig4.html
Link to the code:
https://alexandrasorensen.dk/javascrips/gruppe-4/om-mig4.html
Leave a Reply