Scribd
Upload
1 views4 pages

Weather app Learnings

The document outlines key CSS, HTML, and JavaScript concepts relevant to a weather app, including properties like box-shadow, viewport height, and async/await functions. It also discusses handling API data, such as constructing dynamic URLs and managing JSON responses. These concepts aim to enhance the app's functionality and user interface.

Uploaded by

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

Weather app Learnings

The document outlines key CSS, HTML, and JavaScript concepts relevant to a weather app, including properties like box-shadow, viewport height, and async/await functions. It also discusses handling API data, such as constructing dynamic URLs and managing JSON responses. These concepts aim to enhance the app's functionality and user interface.

Uploaded by

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

Weather app Learnings

CSS Concepts

 box-shadow:

o Adds shadow effects to elements.

o Example:

box-shadow: 5px 5px 15px #1addeb, -5px -5px 10px #ffffff;

Creates two shadows with different offsets, blurs, and colors.

 inset:

o With box-shadow: Creates an inner shadow (sunken effect).

o As a property: A shorthand for setting top, right, bottom,


and left all at once.

 box-sizing: border-box:

o The element’s width and height include its padding and


border.

o Simplifies layout by preventing unexpected element size


increases.

 Viewport Height (vh):

o 1vh equals 1% of the viewport height.

o height: 100vh; makes an element as tall as the entire


viewport.

 Flex vs. Flexbox:

o Flexbox: The CSS layout module activated by display: flex;.

o Flex (property): A shorthand for flex-grow, flex-shrink, and


flex-basis applied to flex items.

HTML Concepts

 span Tag:

o An inline container used for grouping or styling parts of text.

o In your project:

 Used in paragraphs to update dynamic values like wind


speed and humidity.
 Not needed when the entire content (e.g., the
temperature in an <h1>) is updated as one unit.

JavaScript Concepts

 Async/Await:

o async functions: Allow you to write asynchronous code that


looks synchronous.

o await: Pauses the function until a promise is resolved.

o Syntax Example:

async function fetchData() {

const response = await fetch(url);

const data = await response.json();

console.log(data);

 Template Literals:

o Use backticks (`) to create strings that can include variables


using ${}.

o Example:

const name = "Alice";

const greeting = `Hello, ${name}!`;

o Allows easy embedding of variables and expressions in


strings.

 Promises:

o Represent the eventual result of an asynchronous operation.

o Built-in Example:

 fetch() returns a promise.

o Creating Your Own:

const myPromise = new Promise((resolve, reject) => {

// Asynchronous task here...

});
o Handle with .then() for success and .catch() for errors.

 Console Methods:

o console.log(): For general informational messages.

o console.error(): Specifically for errors, often highlighted in


red and can show stack traces.

 DOM Element Updates:

o You can directly update elements:

document.getElementById('temp').innerHTML = `$
{temperature}<sup>°C</sup>`;

o Storing values in constants (like const temperature = ...) can


improve readability and reuse.

Working with API Data

 Dynamic URL Construction:

o Use encodeURIComponent(city) to safely insert user input


(city names) into URLs.

o Example:

const url = `https://api.example.com/weather?location=$


{encodeURIComponent(city)}&format=json&u=c`;

 Handling JSON Responses:

o Use response.json() to convert the API response into a


JavaScript object.

 Temperature Display in Celsius:

o Either request Celsius directly by using a parameter like u=c


in the URL

o Or convert from Fahrenheit to Celsius using a conversion


function.

You might also like