Tell us what’s happening:
I’m trying to find a way to make the previewer work but i cannot find a way to solve the code. Here’s the link: https://codepen.io/marteriquelme/pen/jENqOQr?editors=1112
Your code so far
HTML
CSS
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: #007fff;
border-radius: 10px;
cursor: pointer;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
.power-off {
transform: translateX(20px);
}
.pad-bank {
#drum-machine {
display: flex;
flex-direction: column;
align-items: center;
padding 20px;
}
.drum-pad {
position: relative;
float: left;
margin-right: 10px;
font-size: 20px;
border-radius: 5px;
padding-top: 35px;
background-color: #007fff;
color: red;
box-sizing: border-box;
cursor: pointer;
}
}
.logo {
position: absolute;
top: 5px;
right: 10px;
.inner-logo {
display: inline-block;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
}
.controls-container {
width: 240px;
display: inline-block;
margin: 40px 20px 0 10px;
vertical-align: top;
.control {
width: 100px;
margin: auto;
p {
margin-bottom: 0;
}
}
#display {
width: 200px;
background-color: gray;
margin: 15px auto;
text-align: center;
font-size: 18px;
padding: 15px;
box-sizing: border-box;
}
#volume-slider {
width: 20px;
margin-top: 10px;
}
}
JS
document.addEventListener(“DOMContentLoaded”, function() {
const editor = document.addEventListener(“editor”);
const preview = document.addEventListener(“preview”);
const updatePreview =()=>{
const markdownText = editor.value;
const htmlText = marked(markdownText);
preview.innerHTML = htmlText;
}
event.addEventListener(“input”, updatePreview);
const defaultMarkdown = ¿?;
editor.value = defaultMarkdown;
updatePreview();
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Front End Development Libraries Projects - Build a Markdown Previewer