Updating to latest version

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,54 @@
+---
+name: Bug Report
+about: Create a report to help us improve something that is not working correctly
+title: "Bug - :"
+labels: "Status: Needs Review, Type: Bug"
+assignees: ""
+---
+
+<!-- Thank you for taking the time to submit a bug report to The Odin Project. In order to get issues closed in a reasonable amount of time, you must include a baseline of information about the bug in question. Please read this template in its entirety before filling it out to ensure that it is filled out correctly. -->
+
+Complete the following REQUIRED checkboxes:
+-   [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md)
+-   [ ] The title of this issue follows the `Bug - location of bug: brief description of bug` format, e.g. `Bug - Grid exercises: CSS not properly linked to HTML files`
+
+The following checkbox is OPTIONAL:
+<!-- Completing this checkbox does not guarantee you will be assigned this issue, but rather lets us know you are interested in working on it. -->
+-   [ ] I would like to be assigned this issue to work on it
+
+<hr>
+
+**1. Description of the Bug:**
+<!-- A clear and concise description of what the bug is. Include any screenshots that may help show the bug in action. -->
+
+
+**2. How To Reproduce:**
+<!--
+What steps one might need to take in order to reproduce this bug, e.g.:
+1. Log in
+2. Visit a lesson page
+3. Click the complete button
+4. The complete button does not update
+-->
+
+
+**3. Expected Behavior:**
+<!--
+A brief description of what you expected to happen, e.g.:
+1. Log in
+2. Visit a lesson page
+3. Click the complete button
+4. The complete button updates correctly
+ -->
+
+
+**4. Desktop/Device:**
+<!-- The more information you are able to provide, the better. -->
+-   Device: <!-- [e.g. iPhone6] -->
+-   OS: <!-- [e.g. iOS] -->
+-   Browser: <!-- [e.g. chrome, safari] -->
+-   Version: <!-- [e.g. 22] -->
+
+**5. Additional Information:**
+<!-- Any additional information about the bug. -->
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,38 @@
+---
+name: Feature Request
+about: Suggest a new feature or enhancement for this project
+title: ""
+labels: "Status: Needs Review"
+assignees: ""
+---
+
+<!-- Thank you for taking the time to submit a new feature request to The Odin Project. In order to get issues closed in a reasonable amount of time, you must include a baseline of information about the feature/enhancement you are proposing. Please read this template in its entirety before filling it out to ensure that it is filled out correctly. -->
+
+Complete the following REQUIRED checkboxes:
+-   [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md)
+-   [ ] The title of this issue follows the `location for request: brief description of request` format, e.g. `Foundations exercises: Add exercise for XYZ`
+
+The following checkbox is OPTIONAL:
+<!-- Completing this checkbox does not guarantee you will be assigned this issue, but rather lets us know you are interested in working on it. -->
+-   [ ] I would like to be assigned this issue to work on it
+
+<hr>
+
+**1. Description of the Feature Request:**
+<!--
+A clear and concise description of what the feature or enhancement is, including how it would be useful/beneficial or what problem(s) it would solve.
+-->
+
+
+**2. Acceptance Criteria:**
+<!--
+A list of checkbox items that explain the requirements needed to be met to resolve this request, e.g.:
+- [ ] A theme toggle is present on the dashboard
+- [ ] Clicking the theme toggle changes between light and dark
+- [ ] A user's theme choice persists after leaving the website
+ -->
+
+
+**3. Additional Information:**
+<!-- Any additional information about the feature request, such as a link to a Discord discussion, screenshots, etc. -->
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,32 @@
+<!-- Thank you for taking the time to contribute to The Odin Project. In order to get this pull request (PR) merged in a reasonable amount of time, you must complete this entire template. -->
+
+## Because
+<!-- Summarize the purpose or reasons for this PR, e.g. what problem it solves or what benefit it provides. -->
+
+
+## This PR
+<!-- A bullet point list of one or more items describing the specific changes. -->
+
+
+## Issue
+<!--
+If this PR closes an open issue in this repo, replace the XXXXX below with the issue number, e.g. Closes #2013.
+
+If this PR closes an open issue in another TOP repo, replace the #XXXXX with the URL of the issue, e.g. Closes https://github.com/TheOdinProject/curriculum/issues/XXXXX
+
+If this PR does not close, but is related to another issue or PR, you can link it as above without the 'Closes' keyword, e.g. 'Related to #2013'.
+-->
+Closes #XXXXX
+
+## Additional Information
+<!-- Any other information about this PR, such as a link to a Discord discussion. -->
+
+
+## Pull Request Requirements
+<!-- Replace the whitespace between the square brackets with an 'x', e.g. [x]. After you create the PR, they will become checkboxes that you can click on. -->
+-   [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md)
+-   [ ] The title of this PR follows the `location of change: brief description of change` format, e.g. `01-flex-center: Update self check`
+-   [ ] The `Because` section summarizes the reason for this PR
+-   [ ] The `This PR` section has a bullet point list describing the changes in this PR
+-   [ ] If this PR addresses an open issue, it is linked in the `Issue` section
+-   [ ] If applicable, I have ensured that the TOP solution files match the Desired Outcome image

.gitignore

@@ -0,0 +1,2 @@
+# Ignore MacOS autogenerated
+.DS_Store

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 The Odin Project
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,23 +1,37 @@
 # CSS Exercises
 
-These exercises are a series of css related tasks intended to complement the HTML and CSS content on The Odin Project.
+These exercises consist of a series of CSS-related tasks intended to complement the HTML and CSS content on The Odin Project (TOP). They should only be completed when instructed during the course of the curriculum.
 
-These exercises should be done when instructed during the course of the curriculum.
+When doing these exercises, please use all documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use Google, and do what you need to do (besides checking the solutions) to get them done.
 
-> When doing the following exercises, please use all the documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use google, do what you need to do (besides checking the solutions) to get them done.
+> [!IMPORTANT]
+> We encourage you to practice your git skills by committing your changes and pushing them to your own fork.  However, please **DO NOT** open a Pull Request to have your solutions merged into this repo or to show your solution.  If we were to merge your changes the exercises would no longer be available as intended for new learners, and opening a PR only causes additional work for us, as we have to close it without merging.
 
-## How to use these exercises
+## Contributing
 
-1. Fork and copy this repository. Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how [here](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
-2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's Live Server.
-3. For each exercise, view the README, and edit the CSS file to make the output in your browser look like the images provided.
-4. Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation.
-5. Don't check the solutions until you're done!
+If you have suggestions to improve an exercise, ideas for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our [contributing guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md).
 
-## Some hints
-- The official solutions put all changes at the _end_ of the CSS file, which may duplicate some selectors (e.g. there might be a `body {}` in the given CSS, and another `body {}` in the solution). When you are working on an exercise, it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve the exercise.
-- Unless listed in the self-check section, do not worry about getting the exact pixel value for things like margin, padding and font-size. These exercises are intended to test your knowledge of CSS, not your ability to guess that a screenshot is using `font: sans-serif bold 16px`, or that the margin is _exactly_ `42px`.
-- You may need to add some elements to your HTML to get things into the right spot. (For the first few exercises we make it explicit when this needs to happen.)
-- You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress you'll find that you need to add more and more to get the correct result.
-- In many cases, there will be multiple correct ways to solve these problems. The official solution isn't necessarily the _only right way_, but it is possible to do things in ways that are overall unhelpful. If your solution differs wildly from the official solution (and still passes the self-check criteria), feel free to ask about it in the chatroom.
+## How To Use These Exercises
 
+1. Fork this repository.
+   - A *fork* is your own copy of a repository stored on your GitHub account. To learn how to fork a repository, see the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+1. Clone your *forked* repository.
+   - A *clone* is a copy of a repository on your local machine. If you need help cloning to your local environment, you can learn how from the GitHub documentation on [cloning a repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository).
+1. Go to an exercise directory and open the HTML file in a web browser. You can open the file directly or use something like VSCode's Live Preview extension.
+1. For each exercise, read the README thoroughly before starting any work.
+    - Each README has a "Self Check" list. Use it as a list of **requirements** to make sure your solution matches the "Desired Outcome" image.
+1. Make your edits in the `index.html` and/or the `style.css` files in order to make the output in your browser look like the Desired Outcome image(s).
+    - Depending on the instructions of the exercise, you may only need to make edits in one of these files.
+1. Once you successfully finish an exercise, check TOP's example solution.
+    - You should not be checking the solution for an exercise until you finish it!
+    - If your solution differs from TOP's solution (and still passes the exercise's requirements), that is completely fine. The provided solution is only an example and there are always multiple approaches. Feel free to ask in our Discord if there are parts of the example solution you do not understand.
+
+> [!IMPORTANT]
+> Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
+
+## Some Hints
+
+- The provided example solutions put all changes at the _end_ of the CSS file, which may duplicate some selectors (e.g. there might be a `body {}` in the given CSS and another `body {}` in the solution). When you are working on an exercise, it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve the exercise.
+- Unless listed in the self-check section, do not worry about getting the exact pixel value for things like margin, padding and font size. These exercises are intended to test your knowledge of CSS, not your ability to guess that a screenshot is using `font: sans-serif bold 16px` or that the margin is _exactly_ `42px`.
+- You may need to add some elements to your HTML to get things into the right spot. (For the first few exercises, we make it explicit when this needs to happen.)
+- You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress, you'll find that you need to add more and more selectors to get the correct result.

animation/01-button-hover/README.md → advanced-html-css/animation/01-button-hover/README.md

@@ -1,12 +1,12 @@
 # Button Hover
 
-Use a transition to increase the font-size property of the button when you hover your mouse over it.
+Use a transition to scale the button when you hover your mouse over it.
 
 ## Desired Outcome
 
 ![outcome](./desired-outcome.gif)
 
 ### Self Check
-- Does the font-size property change to increase the size?
+- Does the button grow when you hover it?
 - Do other properties of the button remain unchanged?
 - Does the `:hover` pseudo-class trigger the transition?

advanced-html-css/animation/01-button-hover/solution/solution.css

@@ -0,0 +1,29 @@
+#transition-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: Arial, sans-serif;
+}
+
+button {
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
+  text-align: center;
+}
+
+/* SOLUTION */
+
+button {
+  transition: transform .3s ease-in-out;
+}
+
+button:hover {
+  transform: scale(1.2)
+}

animation/01-button-hover/style.css → advanced-html-css/animation/01-button-hover/style.css

@@ -9,12 +9,11 @@
 }
 
 button {
-  width: 158px;
-  height: 55px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: white;
-  color: black;
-  font-size: small;
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
   text-align: center;
-}
+}

advanced-html-css/animation/02-pop-up/README.md

@@ -0,0 +1,20 @@
+# Popup
+
+In this exercise we have set up a simple pop-up dialog for you. It already works! Load up index.html and give it a shot!
+
+You don't need to worry about the actual functionality here; we've just written a little javascript that adds and removes a `.show` class to the popup and the backdrop.  Your task then is to make it _move_, as in the desired-outcome image below.
+
+### Hints
+- "modal" is another word for 'pop-up'
+- In the code we've provided, the popup is sitting in its final position. You'll need to change its initial position and then use a transition to move it back to the center.
+- You might want to change the initial opacity from 0% to something like 20% while you're working on it, so you can easily see where it is coming from before you click the button.
+- Don't overthink this one... it might seem complicated, but it requires just a few lines of code.
+
+## Desired Outcome
+
+![outcome](./desired-outcome.gif)
+
+### Self Check
+
+- The pop-up slides down into position when you click the open button and slides back up when you click 'close modal'
+- The opacity fades smoothly in and out when toggling the modal

animation/03-pop-up/index.html → advanced-html-css/animation/02-pop-up/index.html

@@ -8,12 +8,15 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div class="button-container">
-      <button id="trigger-modal">Open Modal</button>
-    </div>
+    <div class="backdrop"></div>
     <div class="popup-modal">
+      <h1>Look at me!</h1>
+      <p>I'm a pop up dialog!</p>
       <button id="close-modal">Close Modal</button>
     </div>
+    <div class="button-container">
+      <button id="trigger-modal">Open Modal</button>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>

animation/03-pop-up/script.js → advanced-html-css/animation/02-pop-up/script.js

@@ -2,11 +2,11 @@ const openButton = document.getElementById('trigger-modal');
 const closeButton = document.getElementById('close-modal');
 
 function toggleModal() {
-  const container = document.querySelector('.button-container');
   const modalDiv = document.querySelector('.popup-modal');
+  const backdrop = document.querySelector('.backdrop');
   modalDiv.classList.toggle('show');
-  container.classList.toggle('show');
+  backdrop.classList.toggle('show');
 }
 
 openButton.addEventListener('click', toggleModal);
-closeButton.addEventListener('click', toggleModal);
+closeButton.addEventListener('click', toggleModal);