Scribd
Upload
4 views

JS%20Class%20-%205

Uploaded by

khadarbashakarumanchi1729
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 views

JS%20Class%20-%205

Uploaded by

khadarbashakarumanchi1729
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/ 7

Todos Application 2 > Todos Application | Part 3 | Cheat Sheet

Todos Application | Part 3 | Cheat Sheet


1. Execution Context
The environment in which JavaScript Code runs is called Execution Context.

Execution context contains all the variables, objects, and functions.

Execution Context is destroyed and recreated whenever we reload an Application.

2. Storage Mechanisms
2.1 Client-Side Data Storage
Client-Side Data Storage is storing the data on the client (user's machine).

 Local Storage
 Session Storage
 Cookies
 IndexedDB and many more.

2.2 Server-Side Data Storage


Server-Side Data Storage is storing the data on the server.

3. Local Storage
It allows web applications to store data locally within the user's browser.

It is a Storage Object. Data can be stored in the form of key-value pairs.

Please note that both key and value must be strings. If their type is other than a string,
they get converted to strings automatically.

Key Value

fullName Rahul Attuluri


Key Value

gender Male

city Delhi

To access and work with Local Storage we have below methods:

 setItem()
 getItem()
 clear()
 removeItem()

3.1 The setItem() Method


The setItem() method can be used for storing data in the Local Storage.

Syntax: localStorage.setItem("Key", "Value");

3.2 The getItem() Method


The getItem() method can be used for getting data from the Local Storage.

Syntax: localStorage.getItem("Key");

Try out the setItem() and getItem() methods in the below Code

//HTML CODE
<body>
Your HTML code goes here. Write JavaScript code in JAVASCRIPT tab.
</body>

//JS CODE
localStorage.setItem("fullName", "Rahul Attuluri");

localStorage.setItem("gender", "Male");

localStorage.setItem("city", "Delhi");

let fullName = localStorage.getItem("fullName");

let gender = localStorage.getItem("gender");


let city = localStorage.getItem("city");

console.log(fullName);
console.log(gender);
console.log(city);

4. Values
4.1 null
We use null in a situation where we intentionally want a variable but don't need a value to it.

//JS CODE
let selectedColor = null;

console.log(selectedColor); // null
console.log(typeof(selectedColor)); // object

5. HTML Elements
5.1 The textarea Element
The HTML textarea element can be used to write the multiline text as an input.

<textarea rows="8" cols="55"></textarea>

 The HTML rows attribute specifies the number of lines.


 The HTML cols attribute specifies the number of characters per each line.
Try out the HTML textarea element, setItem() and getItem() methods in the below Code.

//HTML CODE
<body>
<textarea rows="8" cols="55" id="message"></textarea>
<br />
<button class="btn btn-primary mt-1" id="saveButton">Save</button>
</body>

let textAreaElement = document.getElementById("message");


let saveButton = document.getElementById("saveButton");
saveButton.onclick = function() {
let userEnteredText = textAreaElement.value;
localStorage.setItem("userEnteredText", userEnteredText);
};

let storedUserInputValue = localStorage.getItem("userEnteredText");

if (storedUserInputValue === null) {


textAreaElement.value = "";
}
else {
textAreaElement.value = storedUserInputValue;
}

TASKS ON ABOVE CLASS


1.Movie Reviews

In this assignment, let's build a Movie Reviews page by applying the concepts we learned till now.

Refer to the below image.


Instructions:

 Add the HTML elements in the HTML container element with


id movieReviewsContainer using HTML
 The HTML input element should have the id titleInput
 The HTML textarea element should have the id reviewTextarea
 The HTML button element should have the id addBtn
 Dynamically add the movie reviews in the HTML div container element with the id
reviewsContainer
 When the HTML button element with the id addBtn is clicked,
o If the value of the HTML input element with the id titleInput is empty, show an alert
to enter the movie title.

o If the value of the HTML input element with the id titleInput is not empty,

 Add the text entered in titleInput and reviewTextarea to


the reviewsContainer .

 Make the values of titleInput and reviewTextarea empty.

Note
 Try to achieve the design as close as possible.
 Achieve the design with HTML, CSS, and functionality with JS.

Resources

CSS Colors used:

#2d3a35

#7b8794

#cbd2d9

2.Click Counter

In this assignment, let's build a Click Counter by applying the concepts we learned till now.

Refer to the below image.


Instructions:

 Add the HTML elements in the HTML container element with


id clickCounterContainer using HTML
 The HTML span element should have the id counterValue
 The HTML button element should have the id incrementBtn
 Store click count value in local storage with the key clickCount
 When we open or reload the page,
o If the clickCount exists in local storage, set the clickCount value to the text
in countervalue else set 0.

 When incrementBtn is clicked,


o Increment the clickCount value in the HTML span element with the id countervalue
text and update in local storage as well.

Note
 Try to achieve the design as close as possible.
 Achieve the design with HTML, CSS and functionality with JS.
Resources

CSS Colors used:

#f1f5f8

#2d3a35

#c20a72

CSS Font families used:

 Roboto

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy