In June 2024
Search & Filtering
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;
}
Remove and Add Class Names
The goal of this coding exam is to quickly get you off the ground with Adding and Removing Classnames Dynamically.
Use the below reference linkimage.
https://assets.ccbp.in/frontend/content/dynamic-webapps/adding-and-removing-classnames-dynamically-op.gif
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="heading-old-styles" id="heading">h1 Element</h1>
<button id="btnEl" class="button">Remove old styles and add new styles</button>
</body>
</html>
CSS
.heading-old-styles {
color: #00ff00;
background-color: #000000;
}
.button {
color: #ffffff;
background-color: #0967d2;
font-size: 14px;
border-width: 0;
border-radius: 4px;
padding: 10px;
}
.heading-new-styles {
color: #ff0000;
background-color: #ffffff;
}
Include form validation for name and email. (a) Name field should take first name and last name seperated by a space. The first character of first name and the first character of last name should be in capital. Other characters should be small letters. Digits and special characters are not allowed. Eg: A Amar, Amar A, Amar Amar are valid. But a amar, A. Amar are invalid. (b) email id should be of the form eid@nitk.ac.in eid can have alphabets, numbers, underscores and dots. But eid should start with a letter and end with a letter or a number. It cannot have underscores and dots at the beginning and end of eid. It should then match for @nitk.ac.in. On invalid entry, you can show the specific error besides the field in red color.
Design a web page using HTML and CSS for a Music store with background image and Add links which can take to some description about song and At the bottom mention the links for shopping, store, career and contact detail
Product Launch Section, Devices (Size < 900px):Devices (Size >= 900px):
Instructions:
- For the devices less than 900px, the width of image should be 180px and for the rest of devices it should be 300px.
- The page should have the image on the right in devices equals to and above 900px.
- The page should have the image on the top in devices below 900px.
- For the devices less than 900px, use align self property to align the image horizontally in the center.
- Achieve the design using the CSS Flexbox layout and Media queries.
- Try to achieve the design as close as possible.
Use the image URL's given below.
- https://assets.ccbp.in/frontend/intermediate-rwd/fairpods-darkpink-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/fairpods-blue-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/apple-fairpods-img.png
CSS Colors used:
Background color Hex Code values:
#ffdda9
Text color Hex Code values:
#8e62d9
#ffffff
#334155
CSS Font families used:
- Roboto
Design a web page using HTML and CSS for a Music store. Add suitable background image.
1. Add links which can take to some description about song.
2. At the bottom mention the links for shopping, store, career and contact details
-
![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…
