Skip to content

Commit 81045f2

Browse files
captainbrossetcaptainbrosset
committed
New console dom interactions demo page
1 parent 7f4e730 commit 81045f2

File tree

9 files changed

+218
-0
lines changed

9 files changed

+218
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ last sync'd Feb. 2, 2023
3434
| 3D View | Used for [Navigate webpage layers, z-index, and DOM using the 3D View tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/3d-view/). | [/devtools-3d/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-3d) | [Microsoft Edge DevTools 3D View tool demo](https://microsoftedge.github.io/Demos/devtools-3d/) |
3535
| Accessibility testing | Used for [Overview of accessibility testing using DevTools](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools). | [/devtools-a11y-testing/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing) | [Animal shelter](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) |
3636
| Console panel demo pages | Used for [Console overview](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/), [Log messages in the Console tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-log), and [Fix JavaScript errors that are reported in the Console](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript). | [/devtools-console/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-console) | [DevTools Console panel demo pages](https://microsoftedge.github.io/Demos/devtools-console/) |
37+
| DOM interaction from the Console demo page | Used for [Interact with the DOM using the Console](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction). | [/devtools-console-dom-interactions/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-console-dom-interactions) | [DevTools Console tool DOM interactions demo](https://microsoftedge.github.io/Demos/devtools-console-dom-interactions/) |
3738
| Contrast bug fix | Used for [Improving contrast in Microsoft Edge DevTools: A bugfix case study](https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/). | [/devtools-contrast-bugfix/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-contrast-bugfix) | [Testing all badges in DevTools for contrast issues](https://microsoftedge.github.io/Demos/devtools-contrast-bugfix/) |
3839
| CSS Examples | Used for [Get started viewing and changing CSS](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/css/). | [/devtools-css-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) | [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) |
3940
| DOM Examples | Used for [Get started viewing and changing the DOM](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/dom/). | [/devtools-dom-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) | [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) |

‎devtools-console-dom-interactions/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Interact with the DOM using the Console
2+
3+
➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-console-dom-interactions/)** ⬅️
4+
5+
This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Interact with the DOM using the Console](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction).

‎devtools-console-dom-interactions/img/alpaca.jpg

319 KB
Loading

‎devtools-console-dom-interactions/img/cat.jpg

143 KB
Loading

‎devtools-console-dom-interactions/img/deer.jpg

362 KB
Loading

‎devtools-console-dom-interactions/img/horse.jpg

289 KB
Loading

‎devtools-console-dom-interactions/img/sheep.jpg

240 KB
Loading

‎devtools-console-dom-interactions/img/socke.jpg

220 KB
Loading

‎devtools-console-dom-interactions/index.html

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>DevTools Console tool DOM interactions demo</title>
7+
<style>
8+
body {
9+
font-size: .8rem;
10+
margin: 2rem;
11+
font-family: system-ui, sans-serif;
12+
}
13+
14+
main {
15+
display: grid;
16+
margin: 1rem 0;
17+
gap: .5rem;
18+
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
19+
}
20+
21+
section {
22+
padding: 1rem;
23+
background: #fdf8f8;
24+
border-radius: .5rem;
25+
text-align: center;
26+
align-self: start;
27+
}
28+
29+
.header-wrapper {
30+
display: flex;
31+
gap: .2rem;
32+
align-items: center;
33+
justify-content: center;
34+
margin: 0 0 .5rem 0;
35+
}
36+
37+
ul,
38+
li {
39+
margin: 0;
40+
padding: 0;
41+
list-style: none;
42+
}
43+
44+
.header-wrapper h2 {
45+
margin: 0;
46+
}
47+
48+
.header-wrapper a {
49+
height: 1rem;
50+
font-size: .7rem;
51+
text-decoration: none;
52+
}
53+
54+
.header-wrapper a::before {
55+
content: "🔗";
56+
}
57+
58+
img {
59+
width: 100%;
60+
margin-block-start: 1rem;
61+
}
62+
63+
.lightbox {
64+
position: fixed;
65+
top: 0;
66+
left: 0;
67+
right: 0;
68+
bottom: 0;
69+
padding: 1rem;
70+
backdrop-filter: blur(5px);
71+
display: none;
72+
align-items: center;
73+
justify-content: center;
74+
}
75+
76+
.lightbox.show {
77+
display: flex;
78+
}
79+
80+
.lightbox img {
81+
width: calc(80% - 2rem);
82+
margin: 0;
83+
}
84+
</style>
85+
</head>
86+
87+
<body>
88+
<h1>Interact with the DOM using the Console</h1>
89+
<p>This is a demo page for the <a
90+
href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction">Interact
91+
with the DOM using the Console</a> Microsoft Edge DevTools tutorial.</p>
92+
<p>It contains a variety of DOM elements that you can interact with using the Console.</p>
93+
94+
<main>
95+
<section>
96+
<div class="header-wrapper">
97+
<a href="#section-1"></a>
98+
<h2 id="section-1">Section 1</h2>
99+
</div>
100+
<ul>
101+
<li><a href="https://microsoft.com">Link 1</a></li>
102+
<li><a href="#">Link 2</a></li>
103+
<li><a href="#">Link 3</a></li>
104+
<li><a href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/">Link 4</a></li>
105+
<li><a href="#">Link 5</a></li>
106+
<li><a href="#">Link 6</a></li>
107+
</ul>
108+
<img src="img/alpaca.jpg" alt="An alpaca">
109+
</section>
110+
111+
<section>
112+
<div class="header-wrapper">
113+
<a href="#section-2"></a>
114+
<h2 id="section-2">Section 2</h2>
115+
</div>
116+
<ul>
117+
<li><a href="#">Link 7</a></li>
118+
<li><a href="#">Link 8</a></li>
119+
<li><a
120+
href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction">Link
121+
9</a></li>
122+
</ul>
123+
<img src="img/cat.jpg" alt="A cat">
124+
</section>
125+
126+
<section>
127+
<div class="header-wrapper">
128+
<a href="#section-3"></a>
129+
<h2 id="section-3">Section 3</h2>
130+
</div>
131+
<ul>
132+
<li><a href="#">Link 10</a></li>
133+
<li><a href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/">Link 11</a></li>
134+
<li><a href="#">Link 12</a></li>
135+
<li><a href="https://microsoft.com">Link 13</a></li>
136+
<li><a href="#">Link 14</a></li>
137+
<li><a href="#">Link 15</a></li>
138+
</ul>
139+
<img src="img/deer.jpg" alt="A deer">
140+
</section>
141+
142+
<section>
143+
<div class="header-wrapper">
144+
<a href="#section-4"></a>
145+
<h2 id="section-4">Section 4</h2>
146+
</div>
147+
<ul>
148+
<li><a
149+
href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction">Link
150+
16</a></li>
151+
<li><a href="#">Link 17</a></li>
152+
</ul>
153+
<img src="img/horse.jpg" alt="A horse">
154+
</section>
155+
156+
<section>
157+
<div class="header-wrapper">
158+
<a href="#section-5"></a>
159+
<h2 id="section-5">Section 5</h2>
160+
</div>
161+
<ul>
162+
<li><a href="#">Link 18</a></li>
163+
<li><a href="https://microsoft.com">Link 19</a></li>
164+
<li><a href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/">Link 20</a></li>
165+
<li><a href="https://microsoft.com">Link 21</a></li>
166+
<li><a href="#">Link 22</a></li>
167+
<li><a href="#">Link 23</a></li>
168+
<li><a href="#">Link 24</a></li>
169+
</ul>
170+
<img src="img/sheep.jpg" alt="A sheep">
171+
</section>
172+
173+
<section>
174+
<div class="header-wrapper">
175+
<a href="#section-6"></a>
176+
<h2 id="section-6">Section 6</h2>
177+
</div>
178+
<ul>
179+
<li><a
180+
href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-dom-interaction">Link
181+
25</a></li>
182+
<li><a href="#">Link 26</a></li>
183+
<li><a href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/">Link 27</a></li>
184+
<li><a href="https://microsoft.com">Link 28</a></li>
185+
</ul>
186+
<img src="img/socke.jpg" alt="A socke">
187+
</section>
188+
</main>
189+
190+
<div class="lightbox"></div>
191+
192+
<script>
193+
const lightboxEl = document.querySelector(".lightbox");
194+
195+
function showImage(event) {
196+
const img = event.target;
197+
lightboxEl.innerHTML = `<img src="${img.src}" alt="${img.alt}">`;
198+
lightboxEl.classList.add("show");
199+
}
200+
201+
document.querySelectorAll("img").forEach(img => {
202+
img.addEventListener("click", showImage);
203+
})
204+
205+
lightboxEl.addEventListener("click", e => {
206+
lightboxEl.classList.remove("show");
207+
});
208+
</script>
209+
210+
</body>
211+
212+
</html>

0 commit comments

Comments
 (0)