Search
Remove Item in Local Storage
The goal of this coding exam is to quickly get you off the ground with
Remove Item In Localstorge
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/removeItem-in-localStorage-op.gif
Achieve the given functionality using JS
- When the HTML button with id saveBtn is clicked
- The value of the HTML input element with id inputValue should be stored into the local storage with key as name
- The HTML span element with id name should show the value of the HTML input element.
- When the HTML button with id resetBtn is clicked
- Clear the value in the HTML input element
- Clear the value with key name stored in the local storage and set the text content of the HTML span element with id name to default.
- When the page open's or reload, the value which exists in local storage with key name should be displayed in the HTML span element with id name.
Localstorage using textarea
The goal of this coding exam is to quickly get you off the ground with Localstorage using textarea.
Use the below reference image
https://res.cloudinary.com/dfxicv9iv/image/upload/v1618940947/localstorage-textarea_yvgdzf.gif
Achieve the design with HTML, CSS, and functionality with JS.
- When the Save button is clicked
- If the value in the HTML textarea element is non-empty, store textarea value in local storage with the key yourStory.
- When we open or reload the page,
- The value which exists in local storage with id yourStory should be displayed.
Quick Tip
Use bootstrap button primary.
DOM Manipulations - 3
Use the below reference image.
https://res.cloudinary.com/dfxicv9iv/image/upload/v1619260598/dynamic-dom-manipulations-3_bov0vg.gif
JAVASCRIPT
let blogList = [
{
blogName: "TechCrunch",
uniqueNo: 1,
},
{
blogName: "Wired",
uniqueNo: 2,
},
{
blogName: "Mashable",
uniqueNo: 3,
}
];
let blogsListContainerEl = document.getElementById("blogsListContainer");
function createAndAppendItem(blog) {
let blogId = "blog" + blog.uniqueNo;
let buttonId = "button" + blog.uniqueNo;
let blogEl = document.createElement("li");
blogEl.id = blogId;
blogEl.textContent = blog.blogName;
blogsListContainerEl.appendChild(blogEl);
let buttonEl = document.createElement("button");
buttonEl.classList.add("btn", "btn-danger", "ml-3");
buttonEl.textContent = "Delete";
buttonEl.id = buttonId;
// Write your code here
DOM Manipulations - 2
The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.
Use the below reference image.
https://res.cloudinary.com/dfxicv9iv/image/upload/v1619259911/dom-manipulations-2_ax38mg.gif
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="myContainer"></div>
</body>
</html>
Dynamically add the elements in HTML container element with id
myContainer to achieve the design.
Note
Use the checked property and classList.toggle method to achieve the functionality.
Resources
CSS Colors used:
#7a0ecc
#f2ebfe
DOM Manipulations
The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-1-2-dom-manipulations-op.png
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="interestsContainer"></div>
</body>
</html>
Dynamically add the
input elements in HTML container element with id interestsContainer to achieve the design.
Note
- For one input use the htmlFor property to add HTML for attribute.
- For other input use the setAttribute method to set the HTML attribute for.
for...of loop
The goal of this coding exam is to quickly get you off the ground with the for...of loop.
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-1-3-for-of-loop-op.png
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<h1>Cars</h1>
<ul id="listContainer"></ul>
</div>
</body>
</html>
JAVASCRIPT
let carBrands = ["Benz", "Ferrari", "Audi", "BMW"];
Achieve the design using the for...of loop to iterate over an array in the JS prefilled code.
Appending Elements Dynamically
The goal of this coding exam is to quickly get you off the ground with Creating and Appending Elements Dynamically with JS.
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/creating-and-appending-elements-with-js-op.png
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="myContainer"></div>
</body>
</html>
Resources
CSS Colors used:
Text colors Hex code values used:
#0000ff
Counter
The goal of this coding exam is to quickly get you off the ground with Conversions and Conditional Statements.
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/counter-op.gif
HTML
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p id="counterValue" class="counter-value">0</p>
<button id="decreaseBtn" class="button" onclick="onDecrement()">DECREASE</button>
<button id="resetBtn" class="button" onclick="onReset()">RESET</button>
<button id="increaseBtn" class="button" onclick="onIncrement()">INCREASE</button>
</body>
</html>
CSS
.counter-value {
font-size: 36px;
font-weight: 900;
}
.button {
color: #ffffff;
background-color: #0967d2;
font-size: 14px;
border-width: 0;
border-radius: 4px;
padding: 10px;
}
Sign In Page
The goal of this coding exam is to quickly get you off the ground with Conversions and Conditional Statements.
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/signin-op.gif
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Enter your Name</p>
<input type="text" id="inputElement" />
<p>Enter your Password</p>
<input type="password" id="passwordElement" />
<div>
<button class="button" id="signInBtn" onclick="signIn()">Sign In</button>
</div>
<p id="messageText"></p>
</body>
</html>
CSS
.button {
color: #ffffff;
background-color: #0967d2;
font-size: 14px;
border-width: 0;
border-radius: 4px;
margin: 10px;
padding: 10px;
}
Dynamic Event Listeners
The goal of this coding exam is to quickly get you off the ground with Adding Event Listeners Dynamically.
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/adding-event-listeners-dynamically-op.gif
Resources
CSS Colors used:
Text colors Hex code values used:
#0000ff
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="myContainer">
<p>Create h1 Element dynamically by adding event listeners dynamically</p>
<button class="button" id="createBtn">Create</button>
</div>
</body>
</html>
CSS
.button {
color: #ffffff;
background-color: #0967d2;
font-size: 14px;
border-width: 0;
border-radius: 4px;
padding: 10px;
}
#340153 on Dec 2023