Climate change is a major issue we face. What inspired us to choose this topic and track for our hackathon project is that animals such as polar bears and penguins, are being affected by our daily choices and lifestyle. To combat this, we developed a website dedicated to raising awareness about Climate Change because it is important to educate people on how certain choices can negatively impact other wildlife species, as well as natural structures and environments. Our website has three pages, an intro page that welcomes the user to the site as well as describes what climate change is and how it is impacting us. The second page provides numerous pieces of data and statistics to the user and finally, the third page, informs the user on what they can do to help the environment and lower the effects of climate change by “going green”.
We learned that carbon dioxide levels have been drastically rising for a while. We also found out that global temperatures have been rising by 2 degrees for the past 40 years, and oceans have absorbed a lot of the increased heat. This has caused the sea level to increase by 3.3 millimeters per year. Additionally, Arctic Ice has been decreasing by 12.85% every decade, which affects polar bears and other arctic animals and species. We also learned good collaboration skills and how to code a webpage as a team. We learned how to divide the work equally and everyone was able to acquire more coding experience as well as knowledge through peer learning.
We built the website on a site called repl.it and we used the languages of HTML and CSS. We added links and an “a href” tag to make the table of contents and the sidebar so that when the user clicks the button, it will take them to the specific page that we have linked. We were able to make the user interface by creating a form which asked for user input (in this case, it was their name), and then we used script tags to code the output, which welcomed them to our website. For the hackathon logo, we added an image on top of the sidebar, and added another link for the image so that when the user clicks the hackathon logo, they would be taken back to the first page of our website. This was done using the “a href” tag as well.
Additionally, we added buttons at the bottom of each page that would take the user to the previous/next page if they clicked on it. This was also done by adding the link for each individual page, but instead of using an “a href” tag, we added an input type (which was the button) and an output (which said next page or previous page), and coded using HTML so that when the user clicked the button, their desired page would open in a new tab. We used CSS to change the fonts, sizes, and colors of the text as well as the background, and we used the style tags to do so. We also added different images to make the pages more visually appealing, and we did that by using the img tag and added the src for the image. We made scrolling messages by using the “marquee” tag to create the scrolling message. To do this, we added the tag, changed the behavior to “scroll”, and changed the direction to right, as we wanted the text to start on the left side of the page and exit on the right side.
We occasionally faced issues while coding, due to all of us being beginners and new to coding HTML. For example, we would sometimes have trouble with the fonts as some fonts would appear larger or smaller than desired. Additionally, it would be slightly hard to read the text in code, so we would sometimes add text in spots they weren’t supposed to be in. There were also issues with format. Sometimes, due to miscommunication, we used different fonts, sizes, and colors on each page. We fixed this by discussing and agreeing on a style of text and changing all the code that wasn’t matching.
Log in or sign up for Devpost to join the conversation.