World Window

Inspiration

I wanted this website to be a place where people can share parts of their lives & culture, and learn from others living in different countries. Although there is a lot of information about other places on the internet & in other resources, there aren't a lot of opportunities for people to share & learn directly from others & so this project is meant to give others a chance to do so.

One of the inspirations for this site were games like Wordle, Globle, which were popular in 2021 & 2022, one of the key elements which keeps people coming back to these sites is that you can only play once daily, the curiosity to see which word or which place you will get each day is what creates a daily return. So I wanted to implement the same feature in my website, by allowing for people to receive only one fact per day.

Another inspiration was a app a while ago I saw in which people posted pictures of the view outside their windows (literally), and could see the scenery of windows other people posted. Although the idea seems simple, it gave people a unique way to connect to others, & its also the inspiration behind the idea of my project, as well as the name. Through this site people get to see through a figurative "window" of lives.

What it does

This website is a place where people can share facts about their country, and in turn, they receive a random fact that another used shared. They can choose the topic they want their fact to be related to. Only one fact can be received a day. The "facts" are meant to be things which others may not know unless they are living in that country, for example a specific music artist from that country or a specific street food found there. The idea is to share things about different cultures that aren't otherwise mainstream to share a different perspective.

How its built

The website is built with HTML, CSS, JavaScript++ & the facts are stored in arrays, there are different arrays organized by different topics. Each topic has its own button. When the user clicks the button for which topic the fact they gave belongs to, a function is called upon which stores the fact in the correct array, when the user clicks the button to select which topic they want to learn from, a function is called which takes a fact from that corresponding array randomly and returns it to the user. The facts are stored also in a local storage which allows all facts entered to remain in the arrays even after the website is closed out of, refreshed etc. The toLocaleDateString() along with conditionals checks if the user has already received in a fact within that day.

I used Adobe Color Contrast Checker to make the website accessible for all audiences.

To learn more about the different functions & possibilities in JavaScript I used the W3Schools website, as well as ChatGPT, which also helped in debugging.

Challenges

One of the biggest challenges was the time limitation. It was my first time entering a hackathon & I underestimated how much time it would take to create this program. Looking back if I could I would want to add more visually and fix the bugs which currently exist. I was also really unfamiliar with JavaScript so learning about local storage, using the date system, conditionals, button functions, was a lot to learn in the timeframe, but it also helped me learn how to make websites more interactive. If I could have the chance to go back & improve my project, I would better organize my time, so that I could add more to the website visuals & fix the current bugs in the program, aswell as potentially adding a login/account system where users can create accounts & talk directly to each other.

Limitations One problem is that the facts are stored in a local database, which means that the facts entered by the user(s), will only be saved on one device. This site can still work if its on a shared computer at a public library or school, where different people can enter a fact each day and receive one which another person wrote in, but it won't work the way its intended to with individual users, meaning there cannot be be global interaction currently.

There is still a current bug in the program, where sometimes when the button to receive a fact is pressed, nothing returns.

Something else I also wanted was for users to be able to enter images along with the fact they entered because some things especially categories like "food" & "architecture" are better understood visually.

Accomplishments that we're proud of

I am proud of the fact that I was able to debug certain parts of the code, & using what I learned about HTML & CSS in earlier courses by implementing them in this project.

What I learned

I learned a lot about JavaScript (how to declare variables, the purpose of functions, how to connect to HTML all in more detail) & how difficult it is to code even seemingly simple interactive parts of a website, also learning the different between "local storage" vs "databases", & the purposes of each. Also since it was my first time joining a hackathon, now I have a better idea of how to plan & how much work to do each day to stay organized. I didn't have enough time to create a proper demo video this hackathon, but next time I'll keep in mind how much time needs to be saved for not only debugging the program but the submission process itself.

What's next for World Window

To expand on this project I want to solve the pre-mentioned limitations by being able to add images, using a database for global interaction, fixing the remaining issues in the program. I also want to make the website visually better and making the user experience better by doing things such as indicating a button has been clicked by changing the color. I also want to create a account system where people can login, and bookmark facts they find interesting or useful such as a place they might have not heard of before & want to visit someday or a new recipe etc. I also want to add a map which highlights the country where a fact is from when it is received by the user to give geographical knowledge of the country.

Built With

• adobe
• chatgpt
• css
• html
• javascript
• replit
• w3schools