In June 2024
Search & Filtering
Bike Search
The goal of this coding exam is to quickly get you off the ground with HTML search input element and Bootstrap spinner
Use the below reference image:
https://assets.ccbp.in/frontend/content/dynamic-webapps/bike-search-op.gif
Instructions
- Add the id searchInput to the HTML input element
- Add the id searchResults to the HTML container element
Achieve the design with HTML, CSS, and functionality with JS
- When the page is opened or a value is entered in the HTML input element with id searchInput and press on Enter key
- Make an HTTP Request (GET method) using Fetch with URL https://apis.ccbp.in/city-bikes?bike_name=
- The value entered in the HTML input element with id searchInput should be the value for the query parameter of the given URL
- Add the loading status with the Bootstrap component spinner while making HTTP Request (GET method) as shown in the image.
- Create HTML elements dynamically to set the data i.e, the bike name and city, and add the newly created element to the HTML container element with id as
CCBP Login
output reference image:
https://assets.ccbp.in/frontend/content/dynamic-webapps/ccbp-login-op.gif
<head> </head>
<body>
<div class="container">
<h1 class="form-heading">CCBP Login</h1>
<form id="myForm">
<div class="username">
<label for="name" class="username-heading">User Name</label>
<input autocomplete="off" type="text" id="name" class="input" />
<p id="nameErrMsg" class="error-message"></p>
</div>
<div class="password">
<label for="password" class="password-heading">Password</label>
<input type="password" id="password" class="input" />
<p id="passwordErrMsg" class="error-message"></p>
</div>
some countinue is there.....//
Imagine you have been employed to build a single-page web application that manages a study plan for the Web Development module on the Creative Computing course. Use HTML and CSS to mock-up what this application would look like, without adding any interactivity. You must include:
Wireframe (add image to the directory);
Header, Navigation menu, main content and a footer;
The main content must be split into two or three columns;
Five demo items;
Your HTML should use semantically correct elements;
An external style.css file;
The use of at least one button;
The page does not need to be interactive;
You should focus on the structure and visual layout of the page, but also consider design too;
Commenting throughout.
CCBPLogin
The goal of this coding exam is to quickly get you off the ground with CCBP Login Page
image:
https://assets.ccbp.in/frontend/content/dynamic-webapps/ccbp-login-op.gif
It should pass:
When the HTML button element with attribute type submit is clicked,if the values of the HTML input elements with ids name and password are not empty then text content in the HTML paragraph element with id resultMsg should be displayed as "Login Success".
When the HTML btn element with attribute type submit is clicked,if the values of the HTML input elements with ids name and password are empty then text content in the HTML paragraph element with id resultMsg should be displayed as "Fill in the required details".
When the submit is clicked and the value of the HTML input elements with id name is empty and password is not empty then the text content in the HTML paragraph element with id nameErrMsg and resultMsg should have an error message and "Fill in the required details" respectively.
Random Activity
The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.
Refer to the below image.
https://assets.ccbp.in/frontend/content/dynamic-webapps/random-activity-output.gif
Achieve the given functionality using JS.
Make a HTTP request(GET method) using fetch with the URL
https://apis.ccbp.in/random-activity to get a random activity.
Add
loading status with Bootstrap component spinner while making an HTTP request
It should pass:
JS code implementation should use the .classList.add and .classList.remove.
JS code implementation should use the addEventListener for click event.
When the HTML button element with the id getActivityBtn is clicked, a GET request has to be sent to the given URL. and set HTTP response value in the HTML paragraph element with id activityName, activityType and HTML Img element with id activityImg should change according to the response.
DOM.
image:
https://res.cloudinary.com/dfxicv9iv/image/upload/v1619260598/dynamic-dom-manipulations-3_bov0vg.gif
Delete btn is clicked
The blog element &the respective btn shouldbe deleted.
fill script code:
let blgList = [{
blgName:"TechCrunch",
uniqueNo:1,
},
{
blgName:"Wired",
uniqueNo:2,
}
];
let blgsListContainer = document.getElementById("blogsListContainer");
function createAndAppendItem(blg) {
let blgId = "blog" + blg.uniqueNo;
let btnId = "button" + blg.uniqueNo;
let blgEl = document.createElement("li");
blgEl.id = blgId;
blgEl.textContent = blg.blgName;
blgsListContainer.appendChild(blgEl);
let btnEl = document.createElement("button");
btnEl.classList.add("btn", "btn-danger", "ml-3");
btnEl.textContent ="Delete";
btnEl.id = buttonId;
// Write your code here
blgEl.appendChild(btnEl);
}
for (let blg of blgList) {
createAndAppendItem(blg);
}
DOM Manipulations - 3
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/v1619260598/dynamic-dom-manipulations-3_bov0vg.gif
When the Delete button is clicked
- The blog element and the respective button should be deleted.
Html:
<div>
<h1>Your Saved Blogs</h1>
<ul id="blogsListContainer"></ul>
</div>
Note
Use the removeChild method to remove the element from DOM.
It should pass:
JS code implementation should use the removeChild method to remove the child.
When the HTML button element with the id button1 is clicked,the HTML list item element with the id blog1 should remove from the HTML unordered list element with the id blogsListContainer.
When the HTML button element with the id button1 is clicked,the HTML list item element with the id blog2 should remove from the HTML unordered list element with the id blogsListContainer.
DOM Manipulations - 2
Use the below reference image.
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
HTML:
<body>
<div id="myContainer"></div>
</body>
it should pass:
Page should consist of only one HTML checkbox input element with the HTML attribute id having a non-empty value.
Page should consist of only one HTML label element with the HTML attribute for having a non-empty value.
When the HTML checkbox input is clicked,the text content of the HTML label element should change and shouldn't be empty.
When the HTML checkbox input is clicked,the color of the HTML main heading element should change.
DOM Manipulations.
https://assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-1-2-dom-manipulations-op.png
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.
It should pass:
The HTML container element with the id interestsContainer should consist of only two HTML checkbox input elements with the HTML attribute id having a non-empty value.
The HTML container element with the id interestsContainer should consist of only two HTML label elements with the HTML attribute for having a non-empty value.
The value of the HTML id attribute of two HTML checkbox input elements and the value of the HTML for attribute of the two HTML label elements should be the same.
JS code implementation should use the property htmlFor to set the HTML for attribute.
Operation Room Module
This module tracks all surgeries that take place in the hospital. Right from scheduling the operation,
managing the surgery team, recording the surgery details to checklists associated with a surgery;
it manages in advance and prepares for a surgery or operation by keeping the records of all items
required during the operation. It enables an electronic consent of the patient or the relatives. It also
maintains the data on preoperative and postoperative conditions of the patient. The ultimate
objective of this module is accurate scheduling of the operations with flexibility in managing
bookings, pre-operative checklist, time out document, anesthesia record, operation record,
multilingual consent forms, inventory and stock management of the OT, sterilization schedules,
checks and audits.
-
![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…
