CJCoding With Joseph
15free / daySign inCreate account
TitleTopicsAction
4
Change Text ContentSelect the paragraph with id="message" and change its text content to "Text has ...
easy○ Not Started
HTML DOM
Solve
5
Add CSS ClassSelect the button with id="myButton" and add the CSS class "active" to it. Plat...
easy○ Not Started
HTML DOM
Solve
7
Change Button TextSelect the button with id="submitBtn" and change its text content to "Submit For...
easy○ Not Started
HTML DOM
Solve
8
Add CSS Class to HeadingSelect the heading with id="pageTitle" and add the CSS class "highlight" to it. ...
easy○ Not Started
HTML DOM
Solve
9
Change Image SourceSelect the image with id="profilePic" and change its src attribute to "avatar.pn...
easy○ Not Started
HTML DOM
Solve
12
Change Multiple CSS StylesSelect the paragraph with id="styledText" and change its color to "blue", fontSi...
easy○ Not Started
HTML DOM
Solve
13
Toggle CSS ClassSelect the div with id="themeBox" and toggle the CSS class "dark" on it. Platfo...
easy○ Not Started
HTML DOM
Solve
14
Change innerHTMLSelect the div with id="contentBox" and replace its innerHTML with a new heading...
easy○ Not Started
HTML DOM
Solve
16
Remove an ElementSelect the paragraph with id="removeMe" and remove it from the page. Platform-P...
easy○ Not Started
HTML DOM
Solve
19
Update a Link's DestinationSelect the link with id="navLink" and change its href to "https://example.com" a...
easy○ Not Started
HTML DOM
Solve
20
Remove CSS ClassSelect the div with id="alertBox" and remove the CSS class "error" from it. Pla...
easy○ Not Started
HTML DOM
Solve
21
Query Selector by ClassUse querySelector() to select the first element with class "highlight" and chang...
easy○ Not Started
HTML DOM
Solve
69
Change Paragraph TextA paragraph with id="msg" currently says 'Old text'. Select it and change its te...
easy○ Not Started
HTML DOM
Solve
70
Hide an ElementA div with id="box" is visible. Hide it by setting its CSS display style to 'non...
easy○ Not Started
HTML DOM
Solve
106
Change the Heading TextThe page has a heading with the id `title`. Using JavaScript, select that elemen...
easy○ Not Started
HTML DOM
Solve
107
Highlight the ButtonThere is a button with the id `cta`. Add the CSS class `active` to it so the pag...
easy○ Not Started
HTML DOM
Solve
108
Set the Image Alt TextAn image with the id `logo` is missing its alternative text, which screen reader...
easy○ Not Started
HTML DOM
Solve
109
Paint the Paragraph RedA paragraph with the id `note` should stand out as a warning. Change its inline ...
easy○ Not Started
HTML DOM
Solve
110
Rename the ProductA `<span>` element has the class `product-name` and currently shows `Widget`. Us...
easy○ Not Started
HTML DOM
Solve
111
Update the Link URLA navigation link with the id `home-link` currently points to a placeholder `#`....
easy○ Not Started
HTML DOM
Solve
112
Add a To-Do ItemThere is a to-do list `<ul>` with the id `todo` that already contains one item. ...
easy○ Not Started
HTML DOM
Solve
166
Set Input Placeholder TextSelect the input with id="nameInput" and set its `placeholder` attribute to "Ent...
easy○ Not Started
HTML DOM
Solve
167
Set an Element's Text ColorSelect the paragraph with id="msg" and set its text `color` to "red" using the `...
easy○ Not Started
HTML DOM
Solve
168
Set a Background ColorSelect the element with id="banner" and set its `backgroundColor` style to "yell...
easy○ Not Started
HTML DOM
Solve
169
Make Text BoldSelect the span with id="label" and make its text bold by setting `fontWeight` t...
easy○ Not Started
HTML DOM
Solve
170
Add Alt Text to an ImageSelect the image with id="logo" and set its `alt` attribute to "Company logo". ...
easy○ Not Started
HTML DOM
Solve
171
Add Multiple Classes at OnceSelect the paragraph with id="note" and add BOTH classes "bold" and "rounded" in...
easy○ Not Started
HTML DOM
Solve
172
Replace a CSS ClassSelect the div with id="alert" and replace its "info" class with "warning" using...
easy○ Not Started
HTML DOM
Solve
173
Set a Tooltip TitleSelect the button with id="delBtn" and set its `title` attribute to "Delete this...
easy○ Not Started
HTML DOM
Solve
174
Open a Link in a New TabSelect the link with id="siteLink" and set its `target` attribute to "_blank" so...
easy○ Not Started
HTML DOM
Solve
175
Copy Text From One Element to AnotherRead the text from the span with id="source" and copy it into the span with id="...
easy○ Not Started
HTML DOM
Solve
176
Set an Image's WidthSelect the image with id="pic" and set its `width` attribute to "200" using `set...
easy○ Not Started
HTML DOM
Solve
177
Select First Paragraph by TagUse `document.querySelector()` with the tag name "p" to select the FIRST paragra...
easy○ Not Started
HTML DOM
Solve
183
Increment a CounterThe span with id="counter" holds the number 5. Read it, add 1, and write the new...
easy○ Not Started
HTML DOM
Solve
6
Update Text and Add ClassSelect the paragraph with id="status", change its text content to "Complete", an...
medium○ Not Started
HTML DOM
Solve
10
Update Span Text and Add ClassSelect the span with id="counter" and change its text to "5", then add the CSS c...
medium○ Not Started
HTML DOM
Solve
11
Change Link Href and TextSelect the link with id="homeLink" and change its href attribute to "/home" and ...
medium○ Not Started
HTML DOM
Solve
15
Create and Append New ElementCreate a new paragraph element with the text "This paragraph was created with Ja...
medium○ Not Started
HTML DOM
Solve
17
Create Image Element with AttributesCreate a new image element and set its src to "photo.jpg" and alt to "My Photo"....
medium○ Not Started
HTML DOM
Solve
18
Create List with Multiple ItemsCreate an unordered list (<ul>) with three list items containing "Apple", "Banan...
medium○ Not Started
HTML DOM
Solve
71
Mark a Task as DoneA list item with id="task" represents a to-do item. Add the CSS class 'done' to ...
medium○ Not Started
HTML DOM
Solve
72
Set a Data AttributeA button with id="btn" needs a custom attribute. Set its 'data-state' attribute ...
medium○ Not Started
HTML DOM
Solve
73
Update a Title and CounterThe page has a heading with id="title" (currently 'Welcome') and a span with id=...
medium○ Not Started
HTML DOM
Solve
113
Activate the Menu TabA menu tab `<div>` has the id `tab` and the class `menu-item`. Do two things: ad...
medium○ Not Started
HTML DOM
Solve
114
Mark the Status as DoneA status badge `<span>` has the id `status` and the class `pending`. Update it t...
medium○ Not Started
HTML DOM
Solve
115
Build a Follow ButtonAn empty container `<div>` has the id `panel`. Create a `<button>` element with ...
medium○ Not Started
HTML DOM
Solve
178
Add a Class to Every List ItemSelect ALL list items inside the list with id="menu" and add the class "nav-item...
medium○ Not Started
HTML DOM
Solve
179
Uppercase an Element's TextSelect the heading with id="heading", read its current text, and replace it with...
medium○ Not Started
HTML DOM
Solve
180
Append a Paragraph to a ContainerCreate a new `<p>` element with the text "New paragraph" and append it inside th...
medium○ Not Started
HTML DOM
Solve
181
Create a Link ElementCreate a new `<a>` element with `href` "https://example.com" and text "Visit", t...
medium○ Not Started
HTML DOM
Solve
182
Read a Data AttributeRead the `data-username` value from the div with id="widget" using its `dataset`...
medium○ Not Started
HTML DOM
Solve
184
Disable a ButtonSelect the button with id="saveBtn" and disable it by setting its `disabled` pro...
medium○ Not Started
HTML DOM
Solve
185
Remove an AttributeThe button with id="submitBtn" starts disabled. Remove its `disabled` attribute ...
medium○ Not Started
HTML DOM
Solve
186
Clear a List's ContentsSelect the list with id="todos" and remove all of its items by setting its `inne...
medium○ Not Started
HTML DOM
Solve
187
Count List ItemsCount how many `<li>` items are inside the list with id="list" and show that num...
medium○ Not Started
HTML DOM
Solve
74
Create and Append a List ItemAn empty unordered list has id="list". Create a new <li> element, set its text t...
hard○ Not Started
HTML DOM
Solve
75
Highlight All ParagraphsA container with id="para-list" holds three <p> elements. Select all of the para...
hard○ Not Started
HTML DOM
Solve
188
Add a Status Class Based on a ScoreThe div with id="result" has a `data-score` attribute. Read the score as a numbe...
hard○ Not Started
HTML DOM
Solve
189
Reverse the Order of List ItemsReverse the order of the `<li>` items inside the list with id="ranking" so the l...
hard○ Not Started
HTML DOM
Solve
190
Move an Element Into Another ContainerMove the paragraph with id="item" out of the div with id="source" and into the d...
hard○ Not Started
HTML DOM
Solve