From 6d8273792c45fd2f655aab6cc92b7bc60c942c80 Mon Sep 17 00:00:00 2001
From: "Glitch (glitch-hello-website)" <none>
Date: Mon, 28 Jun 2021 13:43:15 +0000
Subject: [PATCH] Import of glitchdotcom/glitch-hello-website

---
 README.md | 14 ++------------
 TODO.md   | 19 +++++++++++++++++++
 script.js |  8 ++++----
 style.css | 10 +++++-----
 4 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 TODO.md

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
-<button>
-    Click me!
-</button>
-```
-
-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!
 
 ![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576)
 
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
+<button>
+    Click me!
+</button>
+```
+
+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);
 }