Replaced the div by a button element for `pimp my style`.

subjects/pimp-my-style/README.md

@@ -5,7 +5,7 @@
 Check out that button on the HTML page:
 
 ```html
-<div class="button">pimp my style</div>
+<button class="button">pimp my style</div>
 ```
 
 For now, it's only a lonely, basic and sad element ; let's pimp it up!
@@ -20,19 +20,19 @@ Write the body of that function so that the button's class is altered:
 ```
 Example for a `styles` array with only 3 classes:
 
-Page load --> <div class="button"></div>
+Page load --> <button class="button"></div>
 
 ...adding
-Click 1 --> <div class="button one"></div>
-Click 2 --> <div class="button one two"></div>
+Click 1 --> <button class="button one"></div>
+Click 2 --> <button class="button one two"></div>
 
 ...toggling `unpimp`
-Click 3 --> <div class="button one two three unpimp"></div>
+Click 3 --> <button class="button one two three unpimp"></div>
 
 ...and removing backwards
-Click 4 --> <div class="button one two unpimp"></div>
-Click 5 --> <div class="button one unpimp"></div>
-Click 6 --> <div class="button"></div>
+Click 4 --> <button class="button one two unpimp"></div>
+Click 5 --> <button class="button one unpimp"></div>
+Click 6 --> <button class="button"></div>
 ```
 
 ### Notions

subjects/pimp-my-style/index.html

@@ -34,9 +34,12 @@ body {
   padding: 2.5rem 0;
 }
 
-div {
+button {
   user-select: none;
   letter-spacing: 0;
+  color: white;
+  outline: none;
+  border: none;
 }
 
 .button:first-letter {
@@ -50,7 +53,6 @@ div {
 .button {
   background: var(--background);
   font-family: serif;
-  cursor: pointer;
   width: 70%;
   text-align: center;
 }
@@ -167,7 +169,7 @@ import { pimp } from './pimp-my-style.js'
 
 const body = document.querySelector('body')
 
-const button = document.createElement('div')
+const button = document.createElement('button')
 button.className = 'button'
 button.textContent = 'pimp my style'
 body.append(button)