Skip to content

Instantly share code, notes, and snippets.

@carlajarchuleta1-a11y

carlajarchuleta1-a11y/dom-manipulation.markdown

Created November 20, 2025 07:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save carlajarchuleta1-a11y/8fc9ff00978b95dc2d58e3c389e19f38 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save carlajarchuleta1-a11y/8fc9ff00978b95dc2d58e3c389e19f38 to your computer and use it in GitHub Desktop.
Download ZIP
DOM Manipulation
Raw
dom-manipulation.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Dom manipulation tutorial. Learn template-strings, innerHtml and more about dom manipulation">
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"
/>
<title>DOM Manipulation</title>
</head>
<body>
<nav>
<ul class="container__one">
<li class="navbar__name">Good Stuff Creations Tutorials</li>
</ul>
</nav>
<h1 class="title">Dom Manipulation</h1>
<section class="query-selector-all">
<section class="queries">
<article class="first_element">
<h2 class="first__title">Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
<article class="second_element">
<h2>Query Selector All - Select all elements</h2>
<p>I am a paragraph and I am selected also</p>
</article>
</section>
<article class="black__board">
<div class="first__code">
<h2>How to select all elements?</h2>
<button class="code__show__first">Show me the code</button>
</div>
</article>
</section>
<section class="query-selector">
<article class="image"> <img class="first__image" src="https://picsum.photos/420" alt="random image from picsum "></article>
<article class="black__board">
<div class="second__code">
<h2>How to select one element?</h2>
<button class="code__show__second">Show me the code</button>
</div>
</article>
</section>
<section class="recipes-manager">
<article class="recipes-manager_docs">
<div class="recipe-background">
<section class="first">
<label for="name">Recipe Name</label>
<input class="name" type="text" id="name" >
<label for="cuisine">Type of cuisine</label>
<input class="cuisine" type="text" id="cuisine">
</section>
<section class="second">
<label for="number">How many people</label>
<input class="number" type="number" id="number">
</section>
<section class="buttons">
<input class="image" type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;">
<label class="upload" for="file" tabindex="0" style="cursor: pointer;">Upload Image</label>
<button class="button-recipe">Show recipe</button>
</section>
</div>
</article>
<article class="recipe-menu">
<div class="recipe" id="output">
</div>
</article>
</section>
<script src="./app.js"></script>
</body>
</html>
Raw
script.js
const allElements = document.querySelectorAll('.query-selector-all');
const blackBoard = document.querySelector('.first__code');
const blackBoardSecond = document.querySelector('.second__code');
const firstImage = document.querySelector('.first__image');
const codeButtonFirst = document.querySelector('.code__show__first');
const codeButtonSecond = document.querySelector('.code__show__second');
const content = document.querySelector('.queries');
const recipe = document.querySelector('.recipe');
const buttonRecipe = document.querySelector('.button-recipe');
const recipeName = document.querySelector('.name');
const recipeType = document.querySelector('.cuisine');
const numberPeople = document.querySelector('.number');
allElements.forEach(eachElement => {
eachElement.classList.add('selector__all');
});
const querySelectorAll = `
<h4 class="text">First Select all Elements</h4>
<section class="divide">
<article class="divide_js">
<h3 class="language">JS</h3>
<p class="code__editor"><spam class="const">const</spam> allElements = document.<span class="query__selector">querySelectorAll</span><span class="selectors">('.elements')</span>;</p>
<p class="code__editor">allElements.<span class="query__selector">forEach</span>(eachElement <span class="const">=> {</span>
eachElement.classList.<span class="query__selector">add</span><span class="selectors">('selector__all')</span>;
<span class="const">}</span>)</p>
</article>
<article class="divide_css">
<h3 class="language">CSS</h3>
<div class="code__editor">
.<span class="css__selector">selector__all</span> {</br>
<span class="query__selector">color:</span> red;</br>
<span class="query__selector">transition:</span> all 2s;</br>
}
</div>
</article>
</section>
`;
const querySelector = `
<h4 class="text">First Select the image</h4>
<h3 class="language">JS</h3>
<p class="code__editor"><spam class="const">const</spam> firstImage = document.<span class="query__selector">querySelector</span><span class="selectors">('.first__image')</span>;</p>
<p class="code__editor">firstImage.<span class="query__selector">addEventListener</span>('click' <span class="const">, () {</span>
firstImage.classList.<span class="query__selector">toggle</span><span class="selectors">('round')</span>;
<span class="const"}</span>)</p>
<article class="divide_css">
<h3 class="language">CSS</h3>
<div class="code__editor">
.<span class="css__selector">round</span> {</br>
<span class="query__selector">border-radius:</span> 50%;</br>
<span class="query__selector">transition:</span> all 10s;</br>
<span class="query__selector">transform:</span> rotate(360deg);</br>
}
</div>
</article>
</section>
`;
function showMeTheCode() {
blackBoard.innerHTML = querySelectorAll;
}
function showMeTheCodeSecond() {
blackBoardSecond.innerHTML = querySelector;
}
codeButtonFirst.addEventListener('click', showMeTheCode);
codeButtonSecond.addEventListener('click', showMeTheCodeSecond);
firstImage.addEventListener('click', () => {
firstImage.classList.toggle('round');
});
console.group(
blackBoard.parentElement,
blackBoard.children,
blackBoard.childElementCount
);
console.log(content.textContent);
console.log(content.innerHTML);
console.log(recipeName);
console.log(recipe);
window.loadFile = function(event) {
const image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};
function insertRecipe() {
const recipeNames = recipeName.value;
const typeOfRecipe = recipeType.value;
const numberPeoplePerRecipe = numberPeople.value;
const image = document.querySelector('#output');
console.log(typeOfRecipe);
const myHTML = `
<section class="recipe-card">
<div class="card">
<p class="recipe-name">${recipeNames}</p>
<p class="recipe-type">${typeOfRecipe}</p>
<p class="recipe-number"> Serves ${numberPeoplePerRecipe}</p>
</div>
<div class="recipe-image">
<img src="${image.src}" alt="ola" class="recipe-image"/>
</div>
</section>
`;
recipe.innerHTML = myHTML;
return myHTML;
}
buttonRecipe.addEventListener('click', insertRecipe);
Raw
style.css
/*Reset css*/
/*Reset CSS*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
body {
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
font-family: monospace;
}
ul[class],
ol[class] {
list-style: none;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
body,
html {
height: 100vh;
width: 100vw;
}
img {
width: 100px;
}
article > * + * {
margin-top: 1em;
}
input,
button,
textarea,
select {
font: inherit;
}
/*General Styles*/
body {
background-color: white;
}
h1,
h2 {
text-align: center;
}
.title {
font-size: 2.2em;
margin-bottom: 6%;
color: #28430a;
}
.black__board {
width: 90%;
height: 100%;
background: linear-gradient(#616161, #474747);
border: 10px solid #9f7037;
box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.3),
inset 0 30px 30px rgba(255, 255, 255, 0.1);
text-align: center;
color: white;
font-family: "Monospace";
letter-spacing: 1px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
line-height: 2em;
border-radius: 3px;
}
.black__board .const {
color: violet;
}
.black__board .code__editor {
text-align: left;
margin-top: 0;
}
.black__board .query__selector {
color: lightblue;
}
.black__board .selectors {
color: yellow;
}
.black__board .css__selector {
color: orange;
}
.black__board .text {
color: lightgreen;
}
.black__board .language {
color: #edbd54;
line-height: 2.5em;
}
/*Navbar*/
.logo {
width: 100px;
display: block;
}
.container__one {
display: flex;
justify-content: space-around;
align-items: center;
}
.container__one > li {
font-size: 1.5em;
color: #28430a;
padding: 10px;
}
.last {
margin-right: 10px;
}
@media all and (max-width: 600px) {
.container__one {
align-items: center;
}
.container__one > li {
text-align: center;
font-size: 1em;
}
.navbar__name {
margin-right: 2%;
}
.logo {
width: 100px;
}
img {
width: 100px;
margin: 0 auto;
}
}
/*Flex Panels*/
h2 {
font-size: 1.1em;
}
.query-selector-all {
display: flex;
flex-direction: column;
justify-content: center;
/* width: 100%; */
padding-top: 4%;
padding-bottom: 4%;
background-color: #28430a;
border-radius: 10px;
/* margin-left: 5%;
margin-right: 5%; */
text-align: center;
align-items: center;
}
.black__board {
flex: 2;
order: 3;
}
.black__board {
flex: 1;
}
.first__code .display__code {
display: flex;
}
.first__code,
.second__code {
margin-left: 2%;
}
/*Query Selector*/
.round {
border-radius: 50%;
transform: rotate(360deg);
transition: all 10s;
}
.elements {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.query-selector {
padding-bottom: 4%;
padding-top: 4%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 10%;
text-align: center;
background-color: #28430a;
border-radius: 10px;
align-items: center;
}
.first__image {
width: 50%;
}
/*Query Selectors */
.selector__all {
color: #edbd54;
transition: all 2s;
}
@media (min-width: 660px) {
h2 {
font-size: 1.5em;
}
.queries {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 80%;
}
.query-selector-all,
.query-selector {
flex-direction: row;
height: 80%;
background-color: #28430a;
border-radius: 10px;
margin-bottom: 5%;
padding-top: 4%;
padding-right: 4%;
padding-left: 4%;
padding-bottom: 4%;
margin-left: 5%;
margin-right: 5%;
justify-content: space-around;
}
.query-selector,
.elements {
flex-direction: row;
}
.black__board {
max-width: 400px;
height: 70vh;
}
.text {
width: 420px;
text-align: center;
}
.first__image {
width: 90%;
}
}
/*Recipes*/
.recipes-manager {
flex-direction: column;
margin-top: 10%;
}
.recipes-manager_docs {
display: flex;
flex-direction: column;
margin-bottom: 10%;
}
.first {
display: flex;
flex-direction: column;
}
.second {
display: flex;
flex-direction: column;
}
.recipe-image {
width: 100%;
}
label {
font-size: 16px;
text-align: center;
margin-bottom: 2%;
}
input {
width: 50%;
margin: 0 auto;
}
.buttons {
display: flex;
justify-content: center;
}
.button-recipe,
.upload {
width: 25%;
transition-duration: 0.4s;
background-color: white;
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
cursor: pointer;
}
.button-recipe {
background-color: #4caf50; /* Green */
}
.upload {
background-color: #9f7037;
}
/*Recipe Card*/
.recipe {
display: flex;
justify-content: space-around;
height: 80%;
width: 60%;
background-color: #fff;
padding: 30px;
align-self: center;
box-shadow: 0 0 5px rgba(75, 75, 75, 0.6);
/* z-index: 1; */
}
.recipe-card {
display: flex;
flex-direction: column;
}
.card {
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
}
.recipe-name {
font-size: 60px;
font-weight: 300;
line-height: 60px;
margin: 10px 0;
color: blue;
}
.recipe-type {
display: block;
font-size: 12px;
letter-spacing: 0.5px;
margin: 15px 0 0;
text-transform: uppercase;
}
.recipe-number {
display: inline-block;
font-weight: 300;
line-height: 22px;
margin: 10px 0;
}
.recipe-image {
flex: 1;
}
.recipe-menu {
flex: 1;
display: flex;
flex-direction: column;
}
@media (min-width: 660px) {
.recipe-card {
flex-direction: row;
}
.recipes-manager {
display: flex;
align-items: baseline;
flex-direction: row;
align-items: center;
justify-content: space-around;
height: 80%;
}
.recipe-menu {
flex: 1;
display: flex;
flex-direction: column;
}
input {
width: inherit;
}
.name,
.cuisine,
.number {
margin-bottom: 5%;
}
.recipe-background {
background: rgba(0, 0, 0, 0.8);
border-radius: 10px;
box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109),
0 1px 1px rgba(128, 128, 128, 0.155),
0 2.1px 2.1px rgba(128, 128, 128, 0.195),
0 4.4px 4.4px rgba(128, 128, 128, 0.241),
0 12px 12px rgba(128, 128, 128, 0.35);
width: 58%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.recipes-manager_docs {
flex-direction: column;
margin-bottom: 0;
justify-content: space-around;
align-items: center;
height: 80%;
flex: 1;
color: white;
}
.buttons {
flex-direction: column;
align-items: center;
}
.button-recipe,
.upload {
width: 25%;
margin: 0 auto;
transition-duration: 0.4s;
background-color: white;
border: none;
color: black;
border-radius: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
cursor: pointer;
}
.upload,
.button-recipe {
height: 17px;
margin-bottom: 5%;
}
.button-recipe:hover {
background-color: brown; /* Green */
color: white;
}
.upload:hover {
background-color: #4caf50; /* Green */
color: white;
}
.recipe {
width: auto;
margin-right: 10%;
}
.recipe-image {
margin: 2%;
}
}
/*Footer*/
/*Footer*/
.footer {
bottom: 0;
display: flex;
width: 100%;
justify-content: space-between;
padding: 2rem 0;
color: black;
}
.footer > * {
margin-left: 2%;
margin-right: 2%;
}
@media (max-width: 567px) {
.name {
text-align: center;
}
.footer {
display: flex;
flex-direction: column;
padding: 1.2rem 0;
position: relative;
right: 0;
bottom: 0;
left: 0;
margin-top: 30px;
}
}
.my-social-media {
list-style: none;
text-decoration: none;
}
.my-social-media > a {
padding: 1rem;
text-decoration: none;
color: black;
}
.my-social-media > li:first-child {
padding-left: 0;
}
.social-media {
display: flex;
justify-content: center;
padding-left: 0;
}
@carlajarchuleta1-a11y
Copy link
Author

carlajarchuleta1-a11y commented Nov 20, 2025

dom-manipulation.markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment