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.....//
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.
CSS Border Properties
The goal of this coding exam is to quickly get you off the ground with the CSS Border Properties.
Use the below reference image.
https://res.cloudinary.com/dfxicv9iv/image/upload/v1619085330/css-border-properties-output_a4ucou.png
Achieve the design by using CSS border
border-* properties. The * indicates the direction.Apply the border shorthand property with the width
5px, style solid, and hex color code #184b73 to the HTML button element with the class name border-shorthandResources
CSS Colors used:
#184b73
#ffffff
HTML code:
<body>
<div class="d-flex flex-column">
<button class="button border-shorthand">border shorthand</button>
<button class="button border-top-none">border top none</button>
<button class="button border-bottom-none">border bottom none</button>
</div>
</body>
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.
Note
Use the removeChild method to remove the element from DOM.
Html code:
<body>
<div>
<h1>Your Saved Blogs</h1>
<ul id="blogsListContainer"></ul>
</div>
</body>
#339914 on Dec 2023