From b854b7afd2d77d8303bccf39e615f24e67ae8ad1 Mon Sep 17 00:00:00 2001
From: Marie Malarme <malarmemarie@gmail.com>
Date: Wed, 17 Jun 2020 19:57:51 +0100
Subject: [PATCH] Replaced the div by a button element for `pimp my style`.

---
 subjects/pimp-my-style/README.md  | 16 ++++++++--------
 subjects/pimp-my-style/index.html |  8 +++++---
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/subjects/pimp-my-style/README.md b/subjects/pimp-my-style/README.md
index 5b128535..bf08fff4 100644
--- a/subjects/pimp-my-style/README.md
+++ b/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
diff --git a/subjects/pimp-my-style/index.html b/subjects/pimp-my-style/index.html
index 3a78c049..7c12d1ae 100644
--- a/subjects/pimp-my-style/index.html
+++ b/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)