Week 1: opdrachten vrijdag
Create a random Emoji and write it yourself
|
The Random Emoji |
My code and code pen |
|---|---|
|
🎱 |
<svg version="1.1"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGradient2" cx=".70" cy="0.15" r=".8">
<stop offset="20%" stop-color="grey" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<radialGradient id="RadialGradient3" cx=".70" cy="0.15" r=".8">
<stop offset="20%" stop-color="lightgrey" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<radialGradient id="darkmode1" cx=".70" cy="0.15" r=".8">
<stop offset="10%" stop-color="#d771ee" />
<stop offset="100%" stop-color="#460156" />
</radialGradient>
<radialGradient id="darkmodestroke" cx=".70" cy="0.15" r=".8">
<stop offset="10%" stop-color="#eb92ff" />
<stop offset="100%" stop-color="#460156" />
</radialGradient>
</defs>
<g>
<circle class="circle-1" cx="150" cy="100" r="80" fill="url(#RadialGradient2)" stroke="url(#RadialGradient3)" stroke-width="5" />
<circle class="circle-1" cx="130" cy="80" r="35" fill="white" />
<text class="tekst" x="130" y="100" font-size="60" text-anchor="middle" fill="black" font-family="open-sans" font-weight="600">8</text>
</g>
</svg>
<button>darkmode</button>.darkmode{
fill: url(#darkmode1);
stroke: url(#darkmodestroke);
}
.bg-dark{
background-color: #000;
}const darkM = document.querySelector("button")
const circle = document.querySelector(".circle-1")
darkM.addEventListener("click", () => {
circle.classList.toggle("darkmode");
document.body.classList.toggle("bg-dark");
}); |