Import of glitchdotcom/glitch-hello-website

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):
+Take a look in `TODO.md` for next steps you can try out in your new site!
-
-```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.
 
 ![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576)
 

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.

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
+    // The JS works in conjunction with the 'dipped' code in style.css
-    btn.classList.toggle("rotated");
+    btn.classList.toggle("dipped");
   };
 }
 

style.css

@@ -175,10 +175,10 @@ h2 {
   transform: translateY(5px);
 }
 
-/* Button rotate
+/* Button dip
-- Toggling this class on and off will rotate it forward and back
+- Toggling this class on and off will move it down and up again
-- The button transition property above determines the speed of rotation (500ms)
+- The button transition property above determines the speed of the translate (500ms)
 */
-.rotated {
+.dipped {
-  transform: rotate(360deg);
+  transform: translateY(5px);
 }