CJCoding With Joseph
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
Change Link Href and TextSelect 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
126
Set Input Placeholder TextSelect the input with id="nameInput" and set its `placeholder` attribute to "Ent...
easy○ Not Started
HTML DOM
Solve
127
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
128
Set a Background ColorSelect the element with id="banner" and set its `backgroundColor` style to "yell...
easy○ Not Started
HTML DOM
Solve
129
Make Text BoldSelect the span with id="label" and make its text bold by setting `fontWeight` t...
easy○ Not Started
HTML DOM
Solve
130
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
131
Add Multiple Classes at OnceSelect the paragraph with id="note" and add BOTH classes "bold" and "rounded" in...
easy○ Not Started
HTML DOM
Solve
132
Replace a CSS ClassSelect the div with id="alert" and replace its "info" class with "warning" using...
easy○ Not Started
HTML DOM
Solve
133
Set a Tooltip TitleSelect the button with id="delBtn" and set its `title` attribute to "Delete this...
easy○ Not Started
HTML DOM
Solve
134
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
135
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
136
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
137
Select First Paragraph by TagUse `document.querySelector()` with the tag name "p" to select the FIRST paragra...
easy○ Not Started
HTML DOM
Solve
143
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
138
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
139
Uppercase an Element's TextSelect the heading with id="heading", read its current text, and replace it with...
medium○ Not Started
HTML DOM
Solve
140
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
141
Create a Link ElementCreate a new `<a>` element with `href` "https://example.com" and text "Visit", t...
medium○ Not Started
HTML DOM
Solve
142
Read a Data AttributeRead the `data-username` value from the div with id="widget" using its `dataset`...
medium○ Not Started
HTML DOM
Solve
144
Disable a ButtonSelect the button with id="saveBtn" and disable it by setting its `disabled` pro...
medium○ Not Started
HTML DOM
Solve
145
Remove an AttributeThe button with id="submitBtn" starts disabled. Remove its `disabled` attribute ...
medium○ Not Started
HTML DOM
Solve
146
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
147
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
148
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
149
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
150
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