diff --git a/README.md b/README.md
index d1846eb..9b33817 100644
--- a/README.md
+++ b/README.md
@@ -14,19 +14,9 @@ This is a basic HTML starter project you can build on however you like. No need
Open each file and check out the comments (in gray) for more info.
-## Next steps π
+## Try this next ποΈ
-Make an edit to your website! In `index.html`, add this code on the line after the comment with "ADD BUTTON HERE" in it (you can copy and paste the button element HTML):
-
-```html
-
-```
-
-Look at the page to see the button. Click it!
-
-Open `script.js` to see the script that makes the button rotate.
+Take a look in `TODO.md` for next steps you can try out in your new site!

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..4963e61
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,19 @@
+# TODO π§
+
+Your new site is all yours so it doesn't matter if you break it! Try editing the codeβadd a button element that moves when the user clicks it.
+
+In `index.html`, add this code on the line after the comment with `ADD BUTTON HERE` in it (you can copy and paste the button element HTML):
+
+```html
+
+```
+
+Look at the page to see the button. Click it!
+
+Open `script.js` to see the script that makes the button move.
+
+## Keep going! π
+
+Try adding more properties to the CSS `dipped` style for the button to see how the changes appear on click.
diff --git a/script.js b/script.js
index 787bf14..82bdd1e 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,6 @@
/*
This is your site JavaScript code - you can add interactivity and carry out processing
-- Initially the JS writes a message to the console, and rotates a button you can add from the README
+- Initially the JS writes a message to the console, and moves a button you can add from the README
*/
// Print a message in the browser's dev tools console each time the page loads
@@ -8,15 +8,15 @@ This is your site JavaScript code - you can add interactivity and carry out proc
console.log("Hello π");
/*
-Make the "Click me!" button rotate when the visitor clicks it:
+Make the "Click me!" button move when the visitor clicks it:
- First add the button to the page by following the "Next steps" in the README
*/
const btn = document.querySelector("button"); // Get the button from the page
// Detect clicks on the button
if (btn) {
btn.onclick = function() {
- // The JS works in conjunction with the 'rotated' code in style.css
- btn.classList.toggle("rotated");
+ // The JS works in conjunction with the 'dipped' code in style.css
+ btn.classList.toggle("dipped");
};
}
diff --git a/style.css b/style.css
index 5bd4f30..154d012 100644
--- a/style.css
+++ b/style.css
@@ -175,10 +175,10 @@ h2 {
transform: translateY(5px);
}
-/* Button rotate
-- Toggling this class on and off will rotate it forward and back
-- The button transition property above determines the speed of rotation (500ms)
+/* Button dip
+- Toggling this class on and off will move it down and up again
+- The button transition property above determines the speed of the translate (500ms)
*/
-.rotated {
- transform: rotate(360deg);
+.dipped {
+ transform: translateY(5px);
}