//Web Development 2 - Weather Top/ Happy- Sky Weather App

HAPPY-SKY WEATHER APP

Áine Phelan -W20114761

INTRODUCTION

This README contains documentation on how to use my version of my Javascript/Handlebars weather station app "Happy-Sky Weather app". The app in relation to the release rubric is fufilled to Release 2. The site contains a LOG IN/ SIGN UP section where users can sign up and log in. They can also add numerous weather stations and furthermore reports to each of the stations. The data gets saved to JSON files. The user can add, delete and update reports within weather stations. The icons reflect weather codes the user inputs and there is also a guide to which ones are valid. Codes are sourced from Open Weather API which is linked below. After creating the majority of the project I made a deployment to Render.com. The screenshots of how the deployment is set up is included in the zip folder and in the reflection document.

HOW TO NAVIGATE

• Press either the log in or sign up button on the welcome page

• When at the dashboard fill in the station details inputting in the Station Name as well as the Latitude and Longitude of it.

• Click the open file icon underneath the station name to view the station reports.

• Click the rubbish bin icon to delete the full station.

• Fill in the Code, Temperature, WindSpeed, Wind Direction and Air Pressure fields and click Add Report to add it to the Weather Station.

• CLick the edit icon next to the delete report button to edit the report. Fill in more about drop down menu as well as open weather api

• To access the project, you can either unzip the project, run the CMD prompt and type "node server.js" and access it locally using "http://localhost:4000" or you can visit the website at the link here https://github.com/ainephelan365/WebDev2-Weather-App.git.

  • Also available in Render https://webdev2-weather-app.onrender.com

  SAMPLE ACCOUNT FOR DEMONSTRATION

  For the purpose of showing the implementation of Log In feature, a Sample Account has been created to show the log in option is functional.

  • USERNAME:
  • PASSWORD:

EXAMPLES

The project is primarily JavaScript and Handlebars. Styling I primarily used Bulma for buttons and for drop down Menu.

    <div class="field">
        <b>Wind Direction</b>
        <div class="select is-success">
          <select name="windDirection" required>
            <option>WIND DIRECTION</option>
            <option>NORTH</option>
            <option>SOUTH</option>
            <option>EAST</option>
            <option>WEST</option>
          </select>
        </div>
      </div>

Other templates such as the main menu were created using Handlebars,

{{> menu active="dashboard"}}

<section class="section">
  {{> list-stations}}
  {{> add-station}}

</section>

DOCUMENTATION & ACKNOWLEDGEMENTS

• Bulma: https://bulma.io/documentation/
• Handlebars: https://handlebarsjs.com/api-reference/
• Open Weather API:https://openweathermap.org/weather-conditions
• Assistance on Bulma Dropdown Menu: https://www.geeksforgeeks.org/css/bulma-dropdown-menu/

IMAGE ACCREDITATION

• Happy Sky Weather Logo: Myself, Áine Phelan 2025.
• Delete, Open, Edit buttons: Web Development 2 Labs, SETU HDip Computer Science 2025.
• Pink weather Icons: Myself using Canva Application.
• Weather Codes : OpenWeather API: https://openweathermap.org/weather-conditions#Weather-Condition-Codes-2

PROJECT LINKS

• GITHUB REPO: https://github.com/ainephelan365/WebDev2-Weather-App.git
• RENDER: https://webdev2-weather-app.onrender.com

CONTACT INFORMATION

For further information, guidance and correspondence, contact myself Áine on github ainephelan365 or send a message on Slack!