Scribd
Upload
4 views4 pages

Project_Report_With_Images

The document outlines two projects: a Weather App and a Personal Portfolio Website. The Weather App provides real-time weather data using HTML, CSS, JavaScript, and the OpenWeatherMap API, featuring a responsive design and error handling. The Personal Portfolio Website showcases personal skills and projects with a clean, responsive layout and smooth scrolling, emphasizing accessibility and mobile-friendliness.

Uploaded by

kumarikhushboo15384
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

Project_Report_With_Images

The document outlines two projects: a Weather App and a Personal Portfolio Website. The Weather App provides real-time weather data using HTML, CSS, JavaScript, and the OpenWeatherMap API, featuring a responsive design and error handling. The Personal Portfolio Website showcases personal skills and projects with a clean, responsive layout and smooth scrolling, emphasizing accessibility and mobile-friendliness.

Uploaded by

kumarikhushboo15384
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Project Report

Project 1: Weather App Using HTML, CSS, JavaScript, and APIs

Overview:

The Weather App is a web-based application that provides real-time weather data for any city

entered by the user. It uses HTML, CSS, and JavaScript along with the OpenWeatherMap API.

Technologies Used:

- HTML5, CSS3, JavaScript (ES6)

- OpenWeatherMap API

Features:

- Search for weather by city name

- Real-time weather data (temperature, humidity, wind speed, icon)

- Responsive design for desktop and mobile

- Error handling for invalid input or network issues

How It Works:

1. User inputs a city name.

2. JavaScript fetches weather data using the fetch API.

3. Data is parsed and displayed dynamically on the page.

Code Snippet:

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=API_KEY&units=metric`)

.then(response => response.json())

.then(data => {
Project Report

document.getElementById('temp').innerText = data.main.temp + ' °C';

document.getElementById('description').innerText = data.weather[0].description;

});

Challenges:

- Handling async fetch requests

- Creating an intuitive UI

Outcome:

An interactive and informative weather app with real-time data fetching and a user-friendly design.
Project Report

Project 2: Personal Portfolio Website

Overview:

The Personal Portfolio is a responsive, single-page website designed to showcase personal skills,

projects, and contact information.

Technologies Used:

- HTML5, CSS3, JavaScript

- Font Awesome, Google Fonts (optional)

Sections:

- Home: Introduction

- About Me: Skills and background

- Projects: Portfolio of work

- Contact: Form or contact details

Features:

- Responsive layout using Flexbox/Grid

- Smooth scrolling and section highlighting

- Clean, minimal design

JavaScript Example:

const navToggle = document.querySelector('.nav-toggle');

const navLinks = document.querySelector('.nav-links');


Project Report

navToggle.addEventListener('click', () => {

navLinks.classList.toggle('active');

});

Challenges:

- Making layout mobile-friendly

- Maintaining visual appeal

- Ensuring accessibility

Outcome:

A well-structured, professional personal website that highlights individual strengths and work

samples.

You might also like