In June 2024
Search & Filtering
Favourite Place
The goal of this coding exam is to quickly get you off the ground with HTML radio input elements
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/favourite-place-op.gif
Achieve the design with HTML, CSS, and functionality with JS
- When the Submit button is clicked
- Text content in the HTML paragraph element should contain the value of the checked HTML radio input element.
Note
- The HTML radio input element with value Agra, should have checked atrribute by default.
- You can use HTML form element.
All syntaxes of Event Listeners
The goal of this coding exam is to quickly get you off the ground with All Syntaxes Of Event Listeners
Use the below reference image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/all-syntaxes-of-event-listeners-op.gif
Achieve the given functionality using JS
- When the HTML Button with Inline event listener is clicked
- Text content in the HTML paragraph element with id messageshould be displayed as "Inline event listener".
- The content of paragraph element should be updated using javascript Inline event listener.
- When the HTML button with id onEventListenerBtn is clicked
- Text content in the HTML paragraph element with id messageshould be displayed as "onevent listener".
- The content of paragraph element should be updated using javascript onevent listener.
- When the HTML button with id addEventListenerBtn is clicked
- Text content in the HTML paragraph element with id messageshould be displayed as "addEventListener".
Showing loading text with setTimeout
The goal of this coding exam is to quickly get you off the ground with the setTimeout.
Refer to the below image.
https://assets.ccbp.in/frontend/content/react-js/showing-loading-text-with-setTimeout-op.gif
Achieve the given functionality using JS.
When the HTML button element is clicked
- The text content of the button should change to Loading... for 1 second.
- After 1 second the text content of the button should change to Show Loading for 1 sec.
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text-center">
<button id="button" class="button" >
Show Loading for 1 sec
</button>
</div>
</body>
</html>
Hourly Stop Watch
The goal of this coding exam is to quickly get you off the ground with the clearInterval and setInterval.
Refer to the below image.
https://assets.ccbp.in/frontend/content/react-js/hourly-stop-watch-op.gif
Achieve the given functionality using JS.
The timer should be initiated at 0.
- When the HTML button element with the id
- startBtn is clicked, the timer should be started.
- When the HTML button element with the id
- stopBtn is clicked, the timer should be stopped.
- When the HTML button element with the id
- startBtn is clicked after the HTML button element with id stopBtn clicked, the timer should be resumed.
- Timer should reset to 00 minutes, 00 seconds after one hour.
Note
This is a one hour timer. The maximum time is one hour.
Clear Interval
The goal of this coding exam is to quickly get you off the ground with the clearInterval.
Refer to the below image.
https://assets.ccbp.in/frontend/content/react-js/clear-interval-op.gif
Achieve the given functionality using JS.
- The counter should be intially at 0.
- When the HTML button element with the id
- clearCount is clicked,Clear the counter timer using the clearInterval method.
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text-center">
<p id="counter" class="paragraph">0</p>
<button id="clearCount" class="clear-interval-button">Clear Interval</button>
</div>
</body>
</html>
CSS
.clear-interval-button {
border-radius: 10px;
margin-top: 10px;
padding: 15px;
background-color: #0275d8;
color: white;
border: none;
outline: none !important;
}
.paragraph {
font-size: 50px;
}
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.
-
![Help me with my assignment!]()
Who Can Help Me with My Assignment
There are three certainties in this world: Death, Taxes and Homework Assignments. No matter where you study, and no matter…
-
![How to finish assignment]()
How to Finish Assignments When You Can’t
Crunch time is coming, deadlines need to be met, essays need to be submitted, and tests should be studied for.…
-
![Math Exams Study]()
How to Effectively Study for a Math Test
Numbers and figures are an essential part of our world, necessary for almost everything we do every day. As important…
