//Web Development- Assignment 2

WHETHER WEATHER APP

image here

Áine Phelan -W20114761

INTRODUCTION

The following README contains documentation on how to use my version of the Whether Weather App for HDIP Assignment 2. The Whether Weather App is a website that displays the weather for 4 cities: WATERFORD, AMSTERDAM, BERLIN and COPENHAGEN. The site contains a DASHBOARD which gives a quick weather synopsis for each city. It also contains a city focus page when each picture is clicked. As we are new and learning developers, the data we used to run the app is Hardcoded and can be found in the weather_data.js file.

HOW TO NAVIGATE

• On the dashboard, click on the country image to be brought to the Cityfocus, where you will get more detail such as precipitation, wind speed etc.
• To get back to Dashboard and to visit other pages, click on the headings in the Navigation bar and you will be brought to the assigned page.
• To utilise the Navburger drop down menu, take the window out of full size and make it smaller, this will implement the Navigation burger menu instead of the full Navigation bar.
• To access the project, you can either unzip the project, run the CMD prompt and type "eleventy --serve" and access it locally using local host 8080/ or you can visit the website at the link here .

EXAMPLES

BULMA Bulma is one of the main frameworks I used to create the site, namely the bulma cards and nav-burger.

//NAV BURGER 
<nav class="navbar has-background-black">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
      </a>
      <span class="navbar-burger has-background-black" data-target="navbarMenu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </span>

//BULMA CARD 
 <div class="column is-3">
      <section class="card has-text-centered">
       <section class="card has-background-light">
        <header class="card-header">
          <p class="card-header-title is-size-6 is-centered">
            WATERFORD (IRELAND)
        </p>
    </header>
    <div class="card-image">
      <figure class="image">
       <img src="/images/whether_weather_logo.png" style="width:500px;height:300px;">
   </figure>
</div>
<article class="card-content">
  <p class="content is-size-6">
    weather data here
</p>
</div>

LINKS

• WEBSITE LINK (NETLIFY):https://ainepwhetherweatherapp.netlify.app/
• GITHUB REPO LINK: https://github.com/ainephelan365/Web_Dev_Assignment_2_final.git

DOCUMENTATION & ACKNOWLEDGEMENTS

• Bulma: https://bulma.io/documentation/

• Day.js: https://day.js.org/

• Mdn Web Docs (Javascript mainly for this project): https://developer.mozilla.org/en-US/

• Weather Data Documentation: Document can be downloaded from the Lab-01 Data Help on Tutors. Open.meteo

• Weather Codes are as follows:

WEATHER CODE	WEATHER FORECAST
1, 3	Mainly clear, Partly cloudly and overcast
61	Rain:Slight // moderate
80	Rain Showers: moderate // heavy
0	Clear Sky

IMAGE ACCREDITATION

• Whether Weather Logo: Myself, Áine Phelan 2025.
• Testicon.png - data Web Development Folder
• All the other image icons are sourced from flaticon and are as follows Drizzle icons created by Shashank Singh - Flaticon Icon by Md Tanvirul Haque Icon by everyday icon Schnee Icons erstellt von Freepik - Flaticon Storm icons created by Freepik - Flaticon Icon by berkahicon

CONTACT INFORMATION

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