├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── .gitignore ├── CNAME ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Contributors.md ├── LICENSE ├── README.md ├── challenges ├── challenge-1 │ ├── challenge-1.css │ └── challenge-1.html └── challenge-2 │ ├── Instructions-2.txt │ ├── challenge-2.css │ ├── challenge-2.html │ ├── challenge-2.js │ ├── img │ ├── alienmal.jpg │ ├── asteroid.png │ ├── astro.png │ ├── blackhole.png │ ├── comet.png │ ├── earth.png │ ├── harry-potter-snitch.png │ ├── jupiter.gif │ ├── mercury.png │ ├── planet.png │ ├── planetB.png │ ├── planetBrandt.png │ ├── planetdust.png │ ├── saturnBWL.png │ ├── se.png │ ├── ship.gif │ ├── sky.jpg │ ├── spaceship.gif │ ├── tardis.png │ ├── thatsNoMoon.png │ ├── ufo.gif │ ├── unclebay_alien.png │ └── vjvatsal.png │ └── package-lock.json ├── global ├── img │ └── e2g.png └── js │ └── themes.js ├── home-page ├── contributors-panel.js ├── img │ └── thumbnails │ │ ├── challenge01.png │ │ ├── challenge02.png │ │ ├── links.png │ │ └── quiz01.png ├── style.css ├── themePicker.js └── timer.js ├── index.html ├── quiz ├── quiz-questions.js ├── quiz.css ├── quiz.html └── quiz.js ├── useful-links ├── img │ ├── CodeCombat-Logo.png │ ├── CodinGame_logo.svg.png │ ├── HackerRank_logo.png │ ├── academing.png │ ├── animate-css.png │ ├── books.png │ ├── challenge.png │ ├── codepen.png │ ├── codepip.png │ ├── codewars.png │ ├── codier.png │ ├── cover.jpg │ ├── crackingthecodinginterviewcover.jpg │ ├── cs50.png │ ├── e2g.png │ ├── edabit.png │ ├── flexbox.ico │ ├── freecodecamp.png │ ├── freepik.png │ ├── games.png │ ├── html&css.jpg │ ├── javabeginnersguide.jpg │ ├── javascript&jquery.jpg │ ├── javascriptforkids.jpg │ ├── khanacademy.png │ ├── learningwebdesign.jpg │ ├── learnpythonorg.png │ ├── learnpythonthehardway.jpg │ ├── learntocode.png │ ├── mobil.png │ ├── netninja.jpg │ ├── online-course.jpeg │ ├── pngguru.png │ ├── podcast.png │ ├── programminghero.png │ ├── realpython.png │ ├── shield.png │ ├── shortcutfoo.png │ ├── skillcrush.png │ ├── sololearn.png │ ├── sourcerer.png │ ├── stefan.png │ ├── study.png │ ├── topcoder.png │ ├── traversy.png │ ├── web.png │ ├── work.gif │ ├── youtube.png │ └── zombie.png ├── useful-links.css └── useful-links.html └── widgets ├── .DS_Store ├── images ├── day.svg ├── icons │ ├── 1.svg │ ├── 11.svg │ ├── 12.svg │ ├── 13.svg │ ├── 14.svg │ ├── 15.svg │ ├── 16.svg │ ├── 17.svg │ ├── 18.svg │ ├── 19.svg │ ├── 2.svg │ ├── 20.svg │ ├── 21.svg │ ├── 22.svg │ ├── 23.svg │ ├── 24.svg │ ├── 25.svg │ ├── 26.svg │ ├── 27.svg │ ├── 3.svg │ ├── 30.svg │ ├── 31.svg │ ├── 32.svg │ ├── 33.svg │ ├── 34.svg │ ├── 35.svg │ ├── 36.svg │ ├── 37.svg │ ├── 38.svg │ ├── 39.svg │ ├── 4.svg │ ├── 40.svg │ ├── 41.svg │ ├── 42.svg │ ├── 43.svg │ ├── 44.svg │ ├── 5.svg │ ├── 6.svg │ ├── 7.svg │ └── 8.svg └── night.svg ├── waterTracker ├── index.html ├── main.css ├── main.js └── res │ ├── music.mp3 │ └── water-glass.svg ├── widgets.css ├── widgets.html └── widgets.js /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | Topic: 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Editor Folders 2 | .vscode 3 | .DS_Store -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | EASYTOGIT.COM 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at davidfraserwebdev@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ### HTML Style 2 | - use 1 tab for nested HTML elements. 3 | - there should be no whitespace between lines of code. 4 | ### CSS Style 5 | - CSS styles are grouped by HTML elements, Classes, Ids, Nested Elements, Media Queries, Keyframes. 6 | - there should be no whitespaces between lines of code. 7 | - challenges that require you to modify CSS will specify where your CSS styles should go. 8 | ### File and Directory Naming 9 | - both use lower-kebab-case. 10 | ### Adding your name to Contributors.md 11 | - you may add your name, GitHub profile, and or email on a single line in this file. 12 | - please do not modify more than a single line. 13 | ### Adding your name to the contributors panel 14 | - navigate to home-page > contributors-panel.js. 15 | - locate the contributors object and at the bottom of the object you may add your GitHub name and display name. 16 | ### Adding a resource to Useful-links.html 17 | - navigate to useful-links/useful-links.html. 18 | - you may add a list item under the appropriate category. 19 | ### Adding a camper cell to challenge 1 20 | - navigate to challenges/challenge1.html. 21 | - you will find the instructions for the challenge both in challenge1.html and on the easy-to-git website. 22 | - read the instructions carefully and modify the HTML as instructed. 23 | ### Adding a space object to challenge 2 24 | - navigate to challenges/challenge2.html. 25 | - you will find the instructions for the challenge both in challenges/instructs2.txt and on the easy-to-git website. 26 | - read the instructions carefully and modify the HTML as instructed. 27 | ### Adding a theme to index.html 28 | - navigate to home-page/themes.js 29 | - you may add an object containing your own custom theme. 30 | - you will also need to add a link to the 'theme picker' dropdown in index.html as well as an onclick listener for that link. 31 | ### Fixing a bug 32 | - go to issues > new issues > bug report and use the template provided to report the bug. 33 | - after review from an admin, you may work on the bug. 34 | ### Adding a new feature 35 | - go to issues > new issues > Feature request and use the template provided. 36 | - after review from an admin, you may work on the feature. 37 | ### Code of conduct for any pull request 38 | Please review the code of conduct before making any contribution 39 | -------------------------------------------------------------------------------- /Contributors.md: -------------------------------------------------------------------------------- 1 | # Contributors 2 | 3 | - [David Fraser](https://github.com/DavidMatthewFraser) - davidfraserwebdev@gmail.com 4 | - [Fortune Okon](https://github.com/fort3) 5 | - [Randell Dawson](https://github.com/RandellDawson) 6 | - [Biscuitmanz](https://github.com/Syntappz) 7 | - [Emmanuel Zelarayán](https://github.com/EmmaVZ89) 8 | - [theTradeCoder](https://github.com/thetradecoder) 9 | - [Benjamin Thorpe](https://github.com/benjithorpe) 10 | - [George Matthews](https://github.com/gwmatthews) 11 | - [Mister Nobody](https://github.com/misterybodon) 12 | - [Luke Howsam](https://github.com/luke-h1) 13 | - [Vansh Jain](https://github.com/VJ1224) 14 | - [tfrick47](https://github.com/tfrick47) 15 | - [Devansh Singh](https://github.com/Devansh3712) 16 | - [Brian Loveless](https://github.com/BrianLoveGa) 17 | - [Boulderresident](https://github.com/boulderresident) 18 | - [Michal Terranova](https://github.com/mrterranova) 19 | - [Neely Mann](https://github.com/NeelyAnne) 20 | - [Bilikis Orulebaja](https://github.com/borulebaja) 21 | - [Brandt Campbell](https://github.com/Reboot82) 22 | - [Trevor Taylor](https://github.com/Trevis42) 23 | - [Satyam Rastogi](https://github.com/satyamrastogi) 24 | - [JC Avalo](https://github.com/avalojc) 25 | - [Nilaksh Agarwal](https://github.com/nilax97) 26 | - [Ayodele Samuel Adebayo](https://github.com/unclebay143) - unclebigbay@gmail. 27 | - [James Price](https://github.com/jamesmp88) 28 | - [Saurav Kumar](https://github.com/sauravk7077) 29 | - [Autumn Davis](https://github.com/AutumnWishes87) 30 | - [Vatsal Jain](https://github.com/vatsalvj) 31 | - [Vital Julien](https://github.com/JulienVital) 32 | - [Victor Castro Tarraga](https://github.com/soyvikman) 33 | - [Jenna Schultz](https://github.com/jennaschultz) 34 | - [Tanya Mott](https://github.com/tmott13) 35 | - [Malik Mukhtar](https://github.com/malikmukhtar) 36 | - [Clara Renauro](https://github.com/CRenauro) 37 | - [Nwaka Kizito](https://github.com/Kizito007) 38 | - [Priyal Dubey](https://github.com/priyalweb) 39 | - [JC Palmes](https://github.com/khleomix/) 40 | - [Anshuman Mahato](https://github.com/AnshumanMahato/) 41 | - [Maria Belan-Crawford](https://github.com/mViolet/) 42 | - [Mukesh Gurpude](https://github.com/VpingDevil) 43 | - [Namraj Pudasaini](https://github.com/Namrajp) 44 | - [Divyanshu Parihar](https://github.com/divyanshuParihar265) 45 | - [Valerio Belenkov](https://github.com/EOSValerioBelenkov) 46 | - [Peter Dinh](https://github.com/PeterDevelops) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 David Fraser 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # What is Easy to Git? 2 | 3 | - Easy to Git is an open-source project that offers many ways to get started with Git and GitHub. 4 | - More specifically, the master branch of this project is the code for www.easytogit.com where you can see the results of your contributions. 5 | - Interact with our community by joining the Easy to Git chatroom. Feel free to ask questions, make suggestions, and get to know other contributors. 6 | 7 | # What are the Goals? 8 | 9 | - Our main objective is to cultivate a community that supports one another in learning how to collaborate with version control. 10 | - Note: this project is not monetized and never will be. 11 | 12 | # Why should I get involved? 13 | 14 | - Git and GitHub are the industry standards for collaboration on coding projects, it is good to become familiar with these tools. 15 | - Teamwork and collaboration are important skills ... and they can also be really fun! This project encourages both teamwork and collaboration. Further, we have a small, active community that is happy to work with you. 16 | - There are a lot of open-source projects out there and it can be hard to find one to get started with. This project offers several ways to start your journey as an open-source contributor. 17 | - There are GitHub projects that offer an easy way to make your first contribution. Further, this project offers fun and interactive challenges to get you even more comfortable using version control. 18 | 19 | # How to contribute (short version) 20 | 21 | - Pull requests are the way to go. 22 | - Fork our project. 23 | - `git clone https://github.com/`your-github-username`/easy-to-git.git` 24 | - `cd easy-to-git` 25 | - `git checkout -b name-of-new-branch` 26 | - Make your changes. 27 | - `git add name-of-changed-file` 28 | - `git commit -m "what you changed goes here"` 29 | - `git push origin name-of-new-branch` 30 | - Click 'compare and create pull request' on your forked GitHub repo 31 | - Click 'create pull request' 32 | 33 | # How to contribute (long version) 34 | 1. **Create a fork** of the easy-to-git repo, this is what you will be making changes on. To create a fork, click the ‘fork’ button in the top right of the screen. 35 | 36 | 2. You can **create a copy or ‘clone’** of your ‘fork’ on your local machine using the ‘Git’ version control system. To use ‘Git’ on Linux or Mac, open up the ‘Terminal’ application. Linux users may need to install git using the command line. Windows users will need to install Git Bash to use Git. Once you have the ‘Terminal’ or ‘Git Bash’ opened, use `git clone https://github.com/your-user-name/easy-to-git.git` and navigate into this new directory with `cd easy-to-git`. Note that your-user-name is your GitHub username. 37 | 38 | 3. The next step is to **create a branch** where you can make your changes. Type `git branch` into your terminal, this will display all the versions or branches of ‘easy-to-git’ on your local machine. For now, you should only see one branch: `*master`. You could start making changes to your ‘master branch’ but it is common practice to make all your changes on separate branches. To create a new branch use `git checkout -b name-of-branch`. Again run `git branch` and you should now see `master` and `*name-of-branch`. You can switch branches with `git checkout any-branch`. Note that you can delete a branch with `git branch -d branch` and force delete by using `-D`. 39 | 40 | 4. Now you can **make changes** to your newly created branch. Open the 'Contributors.md' file with your favorite text editor, add your name, and save the changes. Note that running the command `git status` will show you all the files that you have changed. 41 | 42 | 5. We will now **add the changes** on your ‘local’ machine to your ‘remote fork’ on GitHub. Tell git that you want to track changes made to the 'Contributors.md' file by using `git add Contributors.md`. Note that you can add changes to multiple files by listing all the modified files separated by a space: `git add file1 file2 … fileN`. 43 | 44 | 6. **Package up all the changes** that GitHub is tracking with `git commit -m ‘a message describing what you’ve changed’`. Note that the message you associate with the commit is helpful for bookkeeping. 45 | 46 | 7. **Add your new branch** with all its changes **to your ‘remote fork’** (which Git calls ‘origin’) with `git push origin name-of-branch`. Your remote copy should now have a `master` branch and a branch called `name-of-branch`. You can toggle between them by clicking the branches button on your repository toolbar. 47 | 48 | 8. Make sure the `name-of-branch` branch is selected and click 'compare & pull request'. This will open up a window where you can describe the changes you’ve made in more detail (which again is helpful for bookkeeping) and click **'create a pull request'**. If there are no conflicts I will merge your changes with easy-to-git master. 49 | 50 | 51 | # Keeping your branches up to date 52 | 53 | - `git remote add upstream https://github.com/DavidMatthewFraser/easy-to-git.git` (you only need to do this once) 54 | - `git fetch upstream` 55 | - `git merge upstream/master` will merge upstream with your current branch, if there are conflicts you will have to resolve them 56 | - `git push origin master` will push the new changes to your personal repository 57 | 58 | # Resolving conflicts 59 | - Navigate to the files that have conflicts 60 | - A conflict in a file will look like this: 61 | ``` 62 | <<<<<<< HEAD 63 | this is some text that conflicts with your text 64 | here is some more conflicting text 65 | ======= 66 | hey man why you gotta conflict with me 67 | >>>>>>> name-of-branch 68 | ``` 69 | - Here's an example of how you might edit the file to resolve the conflict 70 | ``` 71 | this is some text that conflicts with your text 72 | here is some more conflicting text 73 | hey man why you gotta conflict with me 74 | ``` 75 | # What are starter projects that I can work on? 76 | 77 | Before making any contributions to these projects, please read our CONTRIBUTING.md file that outlines our contributing policy. 78 | 79 | - **Challenges**: These are puzzles that are solved by modifying the HTML, CSS, and sometimes Javascript of the associated challenge files. 80 | 81 | - **Contributor Panel**: This displays the project’s contributors on the easy-to-git homepage and you can add your name and GitHub profile by modifying the contributorPanel.js file. 82 | 83 | - **Homepage Themes**: You can add your own custom theme to the easy-to-git homepage by modifying the themes.js file 84 | 85 | - **Quiz Questions**: To add some questions to the quiz open the quizQuestions.js file and add a question with some answers and add the correct answer. That’s it! You can add HTML, CSS or Javascript 86 | 87 | - **Add useful links**: This is a place to share any websites, videos, books, etc. that you would recommend to other developers. You add your own suggestions by modifying the Useful-links.html file. 88 | 89 | # What are the standards for pull requests? 90 | 91 | - You can read about our standards in the CONTRIBUTING.md file. 92 | 93 | # What is the code of conduct enforced in this community? 94 | 95 | - You can read about our code of conduct in the CODE_OF_CONDUCT.md file. 96 | 97 | # I'm stuck, where can I find help? 98 | 99 | - You can ask any questions in on our Gitter chatroom. 100 | 101 | # How can I contact the owner of this repository? 102 | 103 | - Hi, I’m David. I am active in on Gitter but you can also email me at davidfraserwebdev@gmail.com 104 | -------------------------------------------------------------------------------- /challenges/challenge-2/Instructions-2.txt: -------------------------------------------------------------------------------- 1 | Welcome to Challenge #2! 2 | 3 | It's time to have some fun :) 4 | 5 | 6 | Description: The page you just came from is our Open-Source Solar System. 7 | In this challenge, you will add your own 'space object' 8 | to the solar system and give it an animation using Animate.css. 9 | 10 | 11 | Steps: 12 | 13 | 1. Find an image of a spaceship, planet, star, Ufo, etc ... 14 | (Make sure the image has a transparent background color) 15 | 16 | 2. Add an tag under
and link to the image you found with the src attribute 17 | 18 | 4. Give your image a unique id, ex: id='davids_planet' 19 | 20 | 5. Modify your image's position in challenge2.css by targeting your unique id 21 | 22 | (Note: use position: absolute) 23 | 24 | 6. Animate.css is already imported, apply an animation by giving your 25 | 26 | image class='animated bounce' (you can replace bounce with any animations found on 27 | 28 | https://animate.style/ such as flash, pulse, shake and so on) 29 | 30 | 7. (optional) Feel free to add any custom javascript to assets/js/challenge2.js 31 | 32 | 8. Make a merge request with your changes 33 | 34 | - Good Job, You've added a space object to our Open_Source Solar System! 35 | 36 | (Note: Don't be afraid to make mistakes or ask questions) 37 | 38 | -------------------------------------------------------------------------------- /challenges/challenge-2/challenge-2.css: -------------------------------------------------------------------------------- 1 | /*HTML Elements*/ 2 | body { 3 | position: relative; 4 | background: url("../img/sky.jpg"); 5 | overflow: hidden; 6 | width: 100%; 7 | } 8 | /*Classes*/ 9 | .cover { 10 | width: 100%; 11 | height: 100vh; 12 | position: absolute; 13 | background: #000000d5; 14 | z-index: 0; 15 | } 16 | .main { 17 | position: relative; 18 | overflow-x: hidden; 19 | z-index: 1; 20 | min-height: 100vh; 21 | } 22 | .instructions-popup { 23 | position: fixed; 24 | width: 100%; 25 | min-height: 100vh; 26 | left: 0; 27 | top: 0; 28 | z-index: 20; 29 | background: #000000ab; 30 | display: none; 31 | } 32 | .instructions-popup h3 { 33 | align-items: center; 34 | } 35 | .center-wrap { 36 | width: 700px; 37 | background: white; 38 | text-align: center; 39 | padding: 20px; 40 | white-space: pre-wrap; 41 | font-size: 14px; 42 | line-height: 16px; 43 | margin: 20px auto; 44 | border-radius: 10px; 45 | animation-duration: 0.2s; 46 | position: relative; 47 | } 48 | .instructions { 49 | font-weight: bold; 50 | color: #2e2e2e; 51 | text-align: left; 52 | padding: 10px; 53 | } 54 | .png-link { 55 | color: rgb(11, 34, 88); 56 | padding: 15px 25px; 57 | border: solid rgb(11, 34, 88) 2px; 58 | position: absolute; 59 | top: 20px; 60 | right: 20px; 61 | font-weight: bold; 62 | cursor: pointer; 63 | border-radius: 5px; 64 | } 65 | .navbar { 66 | z-index: 1; 67 | position: fixed; 68 | top: 0; 69 | left: 0; 70 | display: flex; 71 | flex-direction: column; 72 | align-items: flex-start; 73 | width: 200px; 74 | } 75 | .btn { 76 | width: 150px; 77 | margin-top: 20px; 78 | } 79 | /* IDs */ 80 | #title { 81 | color: #8efafa; 82 | } 83 | #instructions-container { 84 | width: 100%; 85 | height: 20rem; 86 | overflow: auto; 87 | margin-top: 2rem; 88 | } 89 | #instructions-container::-webkit-scrollbar { 90 | background: #fff; 91 | width: 6px; 92 | } 93 | #instructions-container::-webkit-scrollbar-thumb { 94 | background: #000; 95 | border-radius: 5px; 96 | } 97 | /* Nested Elements */ 98 | /* Media Queries */ 99 | /* Keyframes */ 100 | /* ==================================================================================================================== */ 101 | /* Add your space objects below*/ 102 | 103 | /*jenna*/ 104 | #snitch { 105 | width: 150px; 106 | position: absolute; 107 | margin-top: 400px; 108 | margin-left: 800px; 109 | animation: rotateIn; 110 | animation-duration: 5s; 111 | animation-timing-function: linear; 112 | animation-iteration-count: infinite; 113 | } 114 | 115 | /*david*/ 116 | #davids_planet { 117 | width: 100px; 118 | position: absolute; 119 | margin-top: 300px; 120 | margin-left: 300px; 121 | } 122 | #davids_spaceship { 123 | width: 100px; 124 | position: absolute; 125 | margin-top: 500px; 126 | margin-left: 50px; 127 | } 128 | /*biscuit*/ 129 | #biscuit_ufo { 130 | position: absolute; 131 | width: 300px; 132 | top: -30px; 133 | } 134 | 135 | /* Brian Saturn */ 136 | #BWLSaturn { 137 | position: absolute; 138 | height: 300px; 139 | left: 600px; 140 | top: 200px; 141 | } 142 | 143 | /*emma*/ 144 | #emma_planet { 145 | position: absolute; 146 | width: 10rem; 147 | right: 2rem; 148 | top: 10rem; 149 | transform: rotate(-10deg); 150 | animation-name: jupiter; 151 | animation-duration: 5s; 152 | animation-timing-function: linear; 153 | animation-iteration-count: infinite; 154 | z-index: 100; 155 | } 156 | @keyframes jupiter { 157 | 0% { 158 | right: 2rem; 159 | top: 10rem; 160 | } 161 | 25% { 162 | right: 2.5rem; 163 | top: 10.5rem; 164 | } 165 | 50% { 166 | right: 3rem; 167 | top: 10rem; 168 | } 169 | 75% { 170 | right: 2.5rem; 171 | top: 9.5rem; 172 | } 173 | 100% { 174 | right: 2rem; 175 | top: 10rem; 176 | } 177 | } 178 | #emma_star { 179 | position: absolute; 180 | right: 10rem; 181 | top: 5rem; 182 | width: 2px; 183 | height: 2px; 184 | border-radius: 50%; 185 | background: white; 186 | animation: star; 187 | animation-duration: 1.5s; 188 | animation-timing-function: linear; 189 | animation-iteration-count: infinite; 190 | animation-direction: alternate; 191 | } 192 | @keyframes star { 193 | 0% { 194 | background: #555; 195 | } 196 | 50% { 197 | background: #fff; 198 | } 199 | 100% { 200 | width: 5px; 201 | height: 5px; 202 | background: #fff; 203 | box-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff, -2px 2px 4px #fff, 204 | 2px -2px 4px #fff; 205 | } 206 | } 207 | #emma_moon { 208 | position: absolute; 209 | right: 15rem; 210 | top: 16rem; 211 | width: 2px; 212 | height: 2px; 213 | border-radius: 50%; 214 | background: #fff; 215 | animation: moon; 216 | animation-duration: 10s; 217 | animation-timing-function: linear; 218 | animation-iteration-count: infinite; 219 | z-index: 110; 220 | } 221 | @keyframes moon { 222 | 0% { 223 | background: #555; 224 | } 225 | 25% { 226 | background: #fff; 227 | } 228 | 50% { 229 | right: 0; 230 | top: 13rem; 231 | width: 5px; 232 | height: 5px; 233 | background: #fff; 234 | box-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff, -2px 2px 4px #fff, 235 | 2px -2px 4px #fff; 236 | } 237 | 60% { 238 | z-index: 99; 239 | } 240 | 75% { 241 | background: #555; 242 | z-index: 99; 243 | } 244 | 100% { 245 | right: 15rem; 246 | top: 16rem; 247 | width: 2px; 248 | height: 2px; 249 | background: #fff; 250 | box-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff, -2px 2px 4px #fff, 251 | 2px -2px 4px #fff; 252 | z-index: 99; 253 | } 254 | } 255 | /*nobody*/ 256 | #nobody_se { 257 | position: absolute; 258 | animation: nobody 3s forwards; 259 | top: 0; 260 | left: 0; 261 | z-index: -1; 262 | width: 10%; 263 | } 264 | @keyframes nobody { 265 | 0% { 266 | top: 0%; 267 | left: 0%; 268 | width: 10%; 269 | } 270 | 50% { 271 | top: 40%; 272 | left: 40%; 273 | width: 50%; 274 | } 275 | 100% { 276 | top: 40%; 277 | left: 2000px; 278 | } 279 | } 280 | 281 | /* bilikis */ 282 | #planet_b { 283 | width: 100px; 284 | position: absolute; 285 | margin-top: 500px; 286 | margin-left: 400px; 287 | transform: rotate(-10deg); 288 | } 289 | 290 | #terris_comet { 291 | position: absolute; 292 | top: 750px; 293 | left: -750px; 294 | animation: comet; 295 | animation-duration: 1s; 296 | animation-delay: 3s; 297 | animation-timing-function: ease-out; 298 | } 299 | @keyframes comet { 300 | from { 301 | top: 750px; 302 | left: -750px; 303 | } 304 | to { 305 | top: -350px; 306 | left: 1300px; 307 | } 308 | } 309 | @media (max-width: 1024px) { 310 | .center-wrap { 311 | width: 100%; 312 | } 313 | } 314 | /* michal */ 315 | #michal_asteroid { 316 | position: absolute; 317 | opacity: 0; 318 | animation: michalasteroid; 319 | animation-duration: 15s; 320 | animation-timing-function: linear; 321 | height: 1px; 322 | } 323 | @keyframes michalasteroid { 324 | 0% { 325 | transform: rotate(0deg); 326 | top: 900px; 327 | left: 100vw; 328 | height: 75px; 329 | opacity: 1; 330 | } 331 | 17% { 332 | transform: rotate(360deg); 333 | } 334 | 35% { 335 | transform: rotate(720deg); 336 | } 337 | 50% { 338 | transform: rotate(1080deg); 339 | } 340 | 75% { 341 | transform: rotate(1440deg); 342 | } 343 | 90% { 344 | transform: rotate(1700deg); 345 | top: 475px; 346 | left: 35vw; 347 | height: 2px; 348 | opacity: 1; 349 | } 350 | 100% { 351 | transform: rotate(1800deg); 352 | top: 450px; 353 | left: 30vw; 354 | opacity: 0; 355 | } 356 | } 357 | /* 358 | #michal_dustcloud { 359 | position: absolute; 360 | animation: michaldust; 361 | animation-duration: 15s; 362 | animation-delay: 15.5s; 363 | animation-timing-function: linear; 364 | z-index: 1; 365 | opacity: 0; 366 | } 367 | @keyframes michaldust { 368 | 0% { 369 | height: 0px; 370 | width: 0px; 371 | opacity: 1; 372 | top: 445px; 373 | left: 29vw; 374 | } 375 | 10% { 376 | height: 45px; 377 | width: 45px; 378 | } 379 | 98% { 380 | height: 120px; 381 | width: 120px; 382 | opacity: 0.1; 383 | top: 470px; 384 | left: 34vw; 385 | } 386 | 100% { 387 | opacity: 0; 388 | } 389 | } 390 | */ 391 | #planet_brandt { 392 | position: absolute; 393 | height: 80px; 394 | left: 200px; 395 | top: 600px; 396 | } 397 | 398 | #delta_corp { 399 | position: absolute; 400 | height: 30px; 401 | top: 400px; 402 | left: 400px; 403 | animation: beat .25s infinite alternate; 404 | transform-origin: center; 405 | } 406 | @keyframes beat{ 407 | to { transform: scale(0.4); } 408 | } 409 | #trevor_tardis { 410 | position: absolute; 411 | top: 25rem; 412 | left: 25rem; 413 | animation: rotateOut; 414 | animation-duration: 10s; 415 | animation-timing-function: linear; 416 | animation-iteration-count: infinite; 417 | z-index: 110; 418 | height: 100px; 419 | width: 73px; 420 | } 421 | @keyframes rotateOut { 422 | from { 423 | transform: rotate(0deg) translateX(150px) rotate(0deg); 424 | } 425 | to { 426 | transform: rotate(360deg) translateX(150px) rotate(-360deg); 427 | } 428 | 0% { 429 | top: 25rem; 430 | left: 25rem; 431 | transform: rotate(-360deg); 432 | } 433 | 25% { 434 | top: 28rem; 435 | left: 40rem; 436 | } 437 | 50% { 438 | top: 33rem; 439 | left: 46rem; 440 | } 441 | 75% { 442 | top: 37rem; 443 | left: 40rem; 444 | } 445 | 100% { 446 | top: 25rem; 447 | left: 25rem; 448 | transform: rotate(360deg); 449 | } 450 | } 451 | #avalojcCelestialObject{ 452 | position: absolute; 453 | top: 150px; 454 | left: 200px; 455 | z-index: -1000; 456 | animation: rotateOut; 457 | animation-duration: 1500s; 458 | animation-timing-function: linear; 459 | animation-iteration-count: infinite; 460 | } 461 | 462 | #james_ship { 463 | position: absolute; 464 | right: 200px; 465 | top: 300px; 466 | height: 10rem; 467 | } 468 | 469 | 470 | /* 471 | --------------- 472 | Saurav Kumar's earth 473 | --------------- 474 | */ 475 | 476 | #earth{ 477 | filter: drop-shadow(0 0 4px #fff); 478 | position: absolute; 479 | top: 300px; 480 | left: 20px;; 481 | z-index: 999; 482 | /*animation: earthMovement 2s cubic-bezier(0,1.62,.22,-0.49) 200ms infinite normal both;*/ 483 | } 484 | /* 485 | @keyframes earthMovement{ 486 | 0%{ 487 | left: -250px; 488 | transform: rotateZ(180deg); 489 | } 490 | 100%{ 491 | left: calc(100% + 250px); 492 | transform: rotateZ(0); 493 | } 494 | } 495 | */ 496 | /* Ayodele Samuel Adebayo alien style */ 497 | 498 | #unclebay_alien{ 499 | position: absolute; 500 | left: 750px; 501 | top: 580px; 502 | animation: swagAround; 503 | animation-duration: 5s; 504 | animation-timing-function: linear; 505 | animation-iteration-count: infinite; 506 | } 507 | @keyframes swagAround { 508 | from { 509 | transform: rotate(0deg) translateX(10px) rotate(0deg); 510 | } 511 | to { 512 | transform: rotate(360deg) translateX(10px) rotate(-360deg); 513 | } 514 | } 515 | 516 | #vatsalvj { 517 | position: absolute; 518 | top: 300px; 519 | left: 550px; 520 | } 521 | #naut{ 522 | position: absolute; 523 | top: 100px; 524 | left: 200px; 525 | width: 190px; 526 | height: 280px; 527 | animation: swagAround; 528 | animation-duration: 1s; 529 | animation-timing-function: linear; 530 | animation-iteration-count: infinite; 531 | } 532 | 533 | #priyal{ 534 | position: absolute; 535 | top: 100px; 536 | left: 200px; 537 | width: 210px; 538 | height: 300px; 539 | animation: swagAround; 540 | animation-duration: 10s; 541 | animation-timing-function: linear; 542 | animation-iteration-count: infinite; 543 | } 544 | 545 | #hareom284 546 | { 547 | position: absolute; 548 | top:700px; 549 | left: 10px; 550 | } 551 | 552 | #bluesun{ 553 | position: absolute; 554 | top: 100px; 555 | left: 1000px; 556 | width: 200px; 557 | height: 200px; 558 | animation-timing-function: linear; 559 | animation-iteration-count: infinite; 560 | } -------------------------------------------------------------------------------- /challenges/challenge-2/challenge-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |

Instructions

26 |
27 |

28 |
29 |
Transparent Images
30 | 33 |
34 |
35 |
36 |
37 | 40 | 43 | 46 |
47 |

Open-Source Solar System

48 |
49 | 50 | 51 | 56 | 57 | 58 | 59 |
60 |
61 | 62 | 63 | 64 | 69 | 70 | 71 | 72 | 73 | 78 | 79 | 80 | 81 | 82 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 99 | 100 | 101 | 102 | 103 | 104 | 110 | 111 | 112 | 118 | 119 | 120 | 125 | 126 | 127 | 128 | 129 | 130 | blackhole 131 | 132 | 133 | 138 | testing 139 | 144 |
145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /challenges/challenge-2/challenge-2.js: -------------------------------------------------------------------------------- 1 | $("document").ready(function () { 2 | spaceshipTimer(); 3 | loadInstructions(); 4 | }); 5 | 6 | const popup = $(".instructions-popup"); 7 | 8 | async function loadInstructions() { 9 | const res = await fetch("Instructions-2.txt"); 10 | const text = await res.text(); 11 | $(".instructions").text(text); 12 | } 13 | 14 | $(".instructions-open").click(() => popup.show("ease")); 15 | $(".close-instructions").click(() => popup.hide("ease")); 16 | $(".png-link").click(() => window.open("https://www.pngguru.com/", "_blank")); 17 | 18 | // David's spaceship Logic 19 | const spaceship = document.getElementById("davids_spaceship"); 20 | const ufo = $("#biscuit_ufo"); 21 | let timer; 22 | let x = 300; 23 | let y = 40; 24 | let abduct = false; 25 | 26 | setTimeout(() => { 27 | abduct = true; 28 | }, 3000); 29 | 30 | let spaceshipTimer = () => { 31 | startTimer(); 32 | }; 33 | 34 | function startTimer() { 35 | x++; 36 | abduct ? (y -= 1.5) : y--; 37 | 38 | updatePostion(x, y); 39 | 40 | timer = setTimeout(startTimer, 10); 41 | terminate(y); 42 | } 43 | 44 | function stopTimer() { 45 | clearTimeout(timer); 46 | } 47 | 48 | function updatePostion(x, y) { 49 | // console.log(x,y) 50 | 51 | if (!abduct) { 52 | spaceship.style.left = x + "px"; 53 | } 54 | spaceship.style.top = y + "px"; 55 | ufoFollow(x); 56 | } 57 | 58 | function terminate(y) { 59 | if (y < -500) { 60 | // console.log('terminate') 61 | stopTimer(); 62 | $("#davids_spaceship").remove(); 63 | } 64 | } 65 | 66 | function ufoFollow(x) { 67 | if (abduct) { 68 | setTimeout(() => { 69 | ufo.animate( 70 | { 71 | top: "-=100", 72 | }, 73 | 100, 74 | () => { 75 | ufo.remove(); 76 | } 77 | ); 78 | }, 2400); 79 | } else { 80 | ufo.css({ left: x - 50 }); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /challenges/challenge-2/img/alienmal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/alienmal.jpg -------------------------------------------------------------------------------- /challenges/challenge-2/img/asteroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/asteroid.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/astro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/astro.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/blackhole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/blackhole.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/comet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/comet.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/earth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/earth.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/harry-potter-snitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/harry-potter-snitch.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/jupiter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/jupiter.gif -------------------------------------------------------------------------------- /challenges/challenge-2/img/mercury.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/mercury.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/planet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/planet.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/planetB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/planetB.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/planetBrandt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/planetBrandt.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/planetdust.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/planetdust.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/saturnBWL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/saturnBWL.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/se.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/se.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/ship.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/ship.gif -------------------------------------------------------------------------------- /challenges/challenge-2/img/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/sky.jpg -------------------------------------------------------------------------------- /challenges/challenge-2/img/spaceship.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/spaceship.gif -------------------------------------------------------------------------------- /challenges/challenge-2/img/tardis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/tardis.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/thatsNoMoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/thatsNoMoon.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/ufo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/ufo.gif -------------------------------------------------------------------------------- /challenges/challenge-2/img/unclebay_alien.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/unclebay_alien.png -------------------------------------------------------------------------------- /challenges/challenge-2/img/vjvatsal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/challenges/challenge-2/img/vjvatsal.png -------------------------------------------------------------------------------- /challenges/challenge-2/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1 3 | } 4 | -------------------------------------------------------------------------------- /global/img/e2g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/global/img/e2g.png -------------------------------------------------------------------------------- /home-page/contributors-panel.js: -------------------------------------------------------------------------------- 1 | // Add yourself as a contributor to the contributor panel. 2 | // To see yourself, click on the Contributors Panel in the top 3 | // right of the home page. The 'role' refers to your roll here 4 | // at easytogit.com. Leaving it blank will default to 'Contributor'. 5 | 6 | const contributors = [{ 7 | githubName: "DavidMatthewFraser", 8 | displayName: "david fraser", 9 | role: "Owner", 10 | }, 11 | { 12 | githubName: "Syntappz", 13 | displayName: "Biscuitmanz", 14 | role: "UX/UI", 15 | }, 16 | { 17 | githubName: "RandellDawson", 18 | displayName: "Randell Dawson", 19 | role: "", 20 | }, 21 | { 22 | githubName: "thetradecoder", 23 | displayName: "Mamun Abdullah", 24 | role: "", 25 | }, 26 | { 27 | githubName: "misterybodon", 28 | displayName: "Mister Nobody", 29 | role: "", 30 | }, 31 | { 32 | githubName: "fort3", 33 | displayName: "Fortune Okon", 34 | role: "", 35 | }, 36 | { 37 | githubName: "EmmaVZ89", 38 | displayName: "Emmanuel Zelarayan", 39 | role: "", 40 | }, 41 | { 42 | githubName: "benjithorpe", 43 | displayName: "Benjamin I. Thorpe", 44 | role: "", 45 | }, 46 | { 47 | githubName: "gwmatthews", 48 | displayName: "George W. Matthews", 49 | role: "", 50 | }, 51 | { 52 | githubName: "VJ1224", 53 | displayName: "Vansh Jain", 54 | role: "", 55 | }, 56 | { 57 | githubName: "Devansh3712", 58 | displayName: "Devansh Singh", 59 | role: "", 60 | }, 61 | { 62 | githubName: "terrifricker", 63 | displayName: "Terri Fricker", 64 | roll: "", 65 | }, 66 | { 67 | githubName: "boulderresident", 68 | displayName: "Boulderresident", 69 | roll: "", 70 | }, 71 | { 72 | githubName: "mrterranova", 73 | displayName: "Michal Terranova", 74 | roll: "", 75 | }, 76 | { 77 | githubName: "BrianLoveGa", 78 | displayName: "Brian Loveless", 79 | roll: "", 80 | }, 81 | { 82 | githubName: "satyamrastogi", 83 | displayName: "Satyam Rastogi", 84 | roll: "", 85 | }, 86 | { 87 | githubName: "unclebay143", 88 | displayName: "Ayodele Samuel Adebayo", 89 | roll: "", 90 | }, 91 | { 92 | githubName: "sauravk7077", 93 | displayName: "Saurav Kumar", 94 | roll: "", 95 | }, 96 | { 97 | githubName: "Anushri20", 98 | displayName: "Amushri", 99 | role: "", 100 | }, 101 | { 102 | githubName: "Sonechca", 103 | displayName: "Mintae Kim", 104 | role: "", 105 | }, 106 | { 107 | githubName: "tmott13", 108 | displayName: "Tanya Mott", 109 | role: "", 110 | }, 111 | { 112 | githubName: "malikmukhtar", 113 | displayName: "Malik Mukhtar", 114 | role: "", 115 | }, 116 | { 117 | githubName: "Adityachaturvedi2906", 118 | displayName: "Aditya Chaturvedi", 119 | role: "", 120 | }, 121 | { 122 | githubName: "mViolet", 123 | displayName: "Maria Belan-Crawford", 124 | role: "", 125 | }, 126 | 127 | { 128 | githubName: "imrushikesh", 129 | displayName: "Rushikesh Patil", 130 | role: "Web Dev", 131 | }, 132 | { 133 | githubName: "Namrajp", 134 | displayName: "Nava Raj Pudasaini", 135 | role: "Contributor", 136 | }, 137 | ]; 138 | 139 | const sidePanel = document.querySelector(".panel"); 140 | const panelButton = document.querySelector(".contributors-btn"); 141 | const main = document.querySelector(".main"); 142 | let panelOpen = false; 143 | 144 | const getFollowers = async(name) => { 145 | const url = `https://api.github.com/users/${name}`; 146 | try { 147 | const response = await fetch(url); 148 | const data = await response.json(); 149 | if (data.message) { 150 | throw data.message; 151 | } else { 152 | return { followers: data.followers, repos: data.public_repos }; 153 | } 154 | } catch (error) { 155 | console.error(error); 156 | return { followers: 0, repos: 0 }; 157 | } 158 | }; 159 | 160 | const appendComponents = (contributorComponent) => { 161 | contributors.forEach(async(contributor) => { 162 | const component = contributorComponent(contributor); 163 | sidePanel.innerHTML += component; 164 | }); 165 | }; 166 | 167 | const fetchFollowers = async(contributorComponent) => { 168 | for (let contributor of contributors) { 169 | if (contributor.githubName) { 170 | const { followers } = await getFollowers(contributor.githubName); 171 | contributor.followers = followers; 172 | } 173 | } 174 | appendComponents(contributorComponent); 175 | }; 176 | 177 | const panel = () => { 178 | const githubUrl = (name) => `https://github.com/${name}`; 179 | const contributorComponent = ({ 180 | githubName, 181 | displayName, 182 | role, 183 | followers, 184 | }) => { 185 | displayName = 186 | displayName.length > 18 ? displayName.slice(0, 18) + "..." : displayName; 187 | const url = githubUrl(githubName); 188 | const defaultAvatar = `https://api.adorable.io/avatars/60/${displayName}.png`; 189 | 190 | const href = githubName ? `href="${url}"` : null; 191 | const avatar = githubName ? `${url}.png` : defaultAvatar; 192 | const github = githubName ? "github" : "no link"; 193 | const noLink = githubName ? "" : "no-link"; 194 | 195 | return ` 196 |
197 |
198 |
199 |
200 | github-avatar 201 |
202 |
203 |
204 |

${displayName}

205 |

followers: ${followers || 0}

206 |
207 |

${role || "contributor"}

208 |
209 |
210 |
211 |
212 | 213 | 214 | 215 |

${github}

216 |
217 |
`; 218 | }; 219 | fetchFollowers(contributorComponent); 220 | }; 221 | 222 | const closePanel = () => { 223 | sidePanel.style.height = "0px"; 224 | sidePanel.style.opacity = 0; 225 | panelOpen = !panelOpen; 226 | }; 227 | 228 | const openPanel = () => { 229 | sidePanel.style.height = "100%"; 230 | sidePanel.style.opacity = 1; 231 | panelOpen = !panelOpen; 232 | }; 233 | 234 | const togglePanel = () => { 235 | if (panelOpen) { 236 | closePanel(); 237 | } else { 238 | openPanel(); 239 | } 240 | }; 241 | 242 | window.onload = () => { 243 | panel(); 244 | panelButton.addEventListener("click", togglePanel); 245 | }; 246 | -------------------------------------------------------------------------------- /home-page/img/thumbnails/challenge01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/home-page/img/thumbnails/challenge01.png -------------------------------------------------------------------------------- /home-page/img/thumbnails/challenge02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/home-page/img/thumbnails/challenge02.png -------------------------------------------------------------------------------- /home-page/img/thumbnails/links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/home-page/img/thumbnails/links.png -------------------------------------------------------------------------------- /home-page/img/thumbnails/quiz01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/home-page/img/thumbnails/quiz01.png -------------------------------------------------------------------------------- /home-page/style.css: -------------------------------------------------------------------------------- 1 | /* HTML Elements */ 2 | * { 3 | margin: 0; 4 | box-sizing: border-box; 5 | transition: all 200ms ease-in-out; 6 | } 7 | body { 8 | color: #333; 9 | font-family: sans-serif; 10 | } 11 | body::-webkit-scrollbar-track { 12 | background-color: #f5f5f5; 13 | border-radius: 10px; 14 | } 15 | body::-webkit-scrollbar { 16 | width: 10px; 17 | background-color: #f5f5f5; 18 | } 19 | body::-webkit-scrollbar-track { 20 | background-color: #f5f5f5; 21 | border-radius: 10px; 22 | } 23 | body::-webkit-scrollbar { 24 | width: 10px; 25 | background-color: #f5f5f5; 26 | } 27 | body::-webkit-scrollbar-thumb { 28 | border-radius: 10px; 29 | background-image: -webkit-gradient( 30 | linear, 31 | left bottom, 32 | left top, 33 | color-stop(0.44, #440239), 34 | color-stop(0.72, #620050), 35 | color-stop(0.86, #440039) 36 | ); 37 | } 38 | /* Classes */ 39 | .header { 40 | background-color: #900e78; 41 | color: white; 42 | padding-top: 10px; 43 | } 44 | .logo-wrap { 45 | display: flex; 46 | align-items: center; 47 | justify-content: center; 48 | margin: 10px 10px; 49 | } 50 | .my-container { 51 | width: 100%; 52 | max-width: 1460px; 53 | margin: 0 auto; 54 | padding: 0 30px; 55 | } 56 | .panel { 57 | position: absolute; 58 | padding: 0px 20px 20px 20px; 59 | width: 400px; 60 | right: 0; 61 | height: 0; 62 | background: #1f011a; 63 | transition: 0.7s ease; 64 | color: white; 65 | opacity: 0; 66 | z-index: 5; 67 | border-left: 15px solid #620050; 68 | border-bottom: 15px solid #620050; 69 | border-bottom-left-radius: 5px; 70 | overflow-y: auto; 71 | } 72 | .panel::-webkit-scrollbar { 73 | width: 0px; 74 | background: transparent; 75 | } 76 | .contributor { 77 | width: 100%; 78 | padding: 25px 20px; 79 | border-bottom: 1px solid rgb(224, 224, 224); 80 | display: flex; 81 | justify-content: space-between; 82 | align-items: center; 83 | } 84 | .contributor:last-child { 85 | border: none; 86 | } 87 | .avatar { 88 | width: 60px; 89 | height: 60px; 90 | border-radius: 50%; 91 | overflow: hidden; 92 | } 93 | .avatar-wrap { 94 | position: relative; 95 | margin-right: 20px; 96 | } 97 | .role { 98 | margin-top: 7px; 99 | width: 80px; 100 | height: 18px; 101 | padding: 0 5px; 102 | background: white; 103 | color: #620050; 104 | font-size: 10px; 105 | font-weight: bold; 106 | display: flex; 107 | justify-content: center; 108 | align-items: center; 109 | border-radius: 50px; 110 | text-transform: capitalize; 111 | } 112 | .name { 113 | font-weight: 600; 114 | font-size: 15px; 115 | text-transform: capitalize; 116 | letter-spacing: 1px; 117 | margin: 0; 118 | } 119 | .followers { 120 | font-size: 12px; 121 | color: #868686; 122 | text-transform: capitalize; 123 | margin: 0; 124 | font-weight: 600; 125 | } 126 | .github-wrap { 127 | width: 50px; 128 | } 129 | .github-btn { 130 | width: 40px; 131 | height: 40px; 132 | border-radius: 15%; 133 | overflow: hidden; 134 | background: #3b0632; 135 | display: flex; 136 | justify-content: center; 137 | align-items: center; 138 | cursor: pointer; 139 | text-decoration: none; 140 | margin: auto; 141 | color: white; 142 | } 143 | .github-btn:hover { 144 | color: white; 145 | text-decoration: none; 146 | } 147 | .no-link { 148 | cursor: default; 149 | color: #aaa; 150 | } 151 | .link-text { 152 | padding-top: 5px; 153 | text-align: center; 154 | font-size: 10px; 155 | text-transform: capitalize; 156 | letter-spacing: 1px; 157 | } 158 | .no-decoration { 159 | text-decoration: none; 160 | } 161 | .greeting { 162 | padding: 20px 0; 163 | } 164 | .flex { 165 | display: flex; 166 | justify-content: space-between; 167 | align-items: center; 168 | height: 100%; 169 | } 170 | .center { 171 | display: flex; 172 | justify-content: center; 173 | align-items: center; 174 | } 175 | .contributors-btn { 176 | text-align: center; 177 | letter-spacing: 0.5px; 178 | padding: 18px 20px; 179 | margin: 5px; 180 | border-radius: 2px; 181 | background: #b9189c; 182 | text-transform: uppercase; 183 | font-size: 0.875em; 184 | cursor: pointer; 185 | } 186 | .hidden { 187 | display: none; 188 | } 189 | .btn:hover, 190 | .contributors-btn:hover{ 191 | opacity: 0.7; 192 | font-weight: 600; 193 | } 194 | .section-container { 195 | background-color: #c69dfc; 196 | padding: 40px; 197 | border-radius: 10px; 198 | max-width: 1300px; 199 | margin: 0 10px; 200 | display: flex; 201 | justify-content: center; 202 | align-items: center; 203 | flex-wrap: wrap; 204 | } 205 | .section-container a { 206 | text-decoration: none; 207 | } 208 | .get-started{ 209 | display: flex; 210 | flex-direction: column; 211 | justify-content: center; 212 | align-items: center; 213 | } 214 | .page-content { 215 | display: flex; 216 | flex-direction: column; 217 | justify-content: center; 218 | align-items: center; 219 | padding-bottom: 100px; 220 | } 221 | .section-header { 222 | margin: 1em; 223 | } 224 | .nav-thumbnail { 225 | width: 300px; 226 | padding: 20px 10px; 227 | background: #0000005b; 228 | border-radius: 5px 20px; 229 | margin: 2em; 230 | object-fit: contain; 231 | } 232 | .web-nav { 233 | display: flex; 234 | flex-direction: column; 235 | align-items: center; 236 | justify-content: center; 237 | flex: 1 1 220px; 238 | margin: 15px; 239 | padding: 20px; 240 | border-radius: 2px; 241 | } 242 | .web-nav:hover{ 243 | filter: brightness(0.8); 244 | } 245 | /* IDs */ 246 | #dropdownMenuLink { 247 | background-color: #b9189c; 248 | } 249 | #logo { 250 | width: 55px; 251 | height: 55px; 252 | border-radius: 50%; 253 | margin-right: 20px; 254 | border: solid 2px black; 255 | } 256 | #widgets-btn { 257 | text-decoration: none; 258 | } 259 | /* Nested Elements */ 260 | .panel p { 261 | margin: 0; 262 | } 263 | .github-btn i { 264 | font-size: 30px; 265 | } 266 | .avatar img { 267 | width: 100%; 268 | } 269 | /* Media Queries */ 270 | @media (max-width: 1024px) { 271 | .section-header { 272 | margin: 20px 0; 273 | text-align: center; 274 | } 275 | } 276 | @media (max-width: 600px) { 277 | .section-header { 278 | font-size: 2em; 279 | } 280 | .section-container { 281 | width: 100%; 282 | padding: 20px; 283 | } 284 | .web-nav { 285 | min-width: 100%; 286 | } 287 | .nav-thumbnail { 288 | width: 100%; 289 | } 290 | .section-header { 291 | margin: 20px 0; 292 | text-align: center; 293 | } 294 | .get-started { 295 | text-align: center; 296 | } 297 | .panel{ 298 | width:100%; 299 | } 300 | .contributors-btn{ 301 | width: 100%; 302 | } 303 | } 304 | 305 | /* keyframes */ 306 | -------------------------------------------------------------------------------- /home-page/themePicker.js: -------------------------------------------------------------------------------- 1 | //Dropdown onclick listeners 2 | defaultTheme.onclick = () => { 3 | changeTheme(pageDefault); 4 | }; 5 | lightTheme.onclick = () => { 6 | changeTheme(light); 7 | }; 8 | forestTheme.onclick = () => { 9 | changeTheme(forest); 10 | }; 11 | beachTheme.onclick = () => { 12 | changeTheme(beach); 13 | }; 14 | summerdayTheme.onclick = () => { 15 | changeTheme(summerday); 16 | }; 17 | pumpkinSpiceTheme.onclick = () => { 18 | changeTheme(pumpkinSpice); 19 | }; 20 | abyssTheme.onclick = () => { 21 | changeTheme(abyss); 22 | }; 23 | winterTheme.onclick = () => { 24 | changeTheme(winter); 25 | }; 26 | skyTheme.onclick = () => { 27 | changeTheme(sky); 28 | }; 29 | autumnTheme.onclick = () => { 30 | changeTheme(autumn); 31 | }; 32 | 33 | CharcoalBlueTheme.onclick = () => { 34 | changeTheme(CharcoalBlue); 35 | }; 36 | -------------------------------------------------------------------------------- /home-page/timer.js: -------------------------------------------------------------------------------- 1 | function displayTime() { 2 | setInterval(() => { 3 | const date = new Date(); 4 | $("#date").html(date.toLocaleDateString()); 5 | $("#time").html(date.toLocaleTimeString()); 6 | }, 1000); 7 | }; 8 | displayTime(); 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EasyToGit 7 | 11 | 12 | 16 | 17 | 23 | 24 | 28 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |
42 | 43 |

Home

44 |
45 |
46 |
49 |
50 | 61 |
62 | Default 63 | Light Theme 66 | Forest Theme 69 | Beach Theme 72 | Summer Day Theme 75 | Pumpkin Fall Theme 78 | Abyss Theme 81 | Winter Theme 84 | Sky Theme 85 | Autumn Theme 88 | Charcoal Blue Theme 91 |
92 |
93 |
94 |
97 |
98 | 99 | 100 |
101 |
102 |
103 |
contributors
104 |
105 |
106 | widgets 112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |

Welcome to EasyToGit.com

122 |
123 |

What is EasyToGit?

124 |

125 | Easy to Git is an open-source project that offers many ways to get 126 | started with Git and GitHub 127 |

128 |

129 | We aim to cultivate a community that supports one another in 130 | learning how to collaborate with version control 131 |

132 | 137 |
138 |

Website Navigation

139 |
140 | 141 | 146 |

Challenge One

147 | 148 | 149 | 154 |

Challenge Two

155 | 156 | 157 | 162 |

Quiz

163 | 164 | 165 | 170 |

Useful Links

171 | 172 |
173 |
174 |
175 | 178 | 179 | 180 | 181 | 182 | 187 | 188 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /quiz/quiz.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #5f1735; 3 | --peach: #dba7a2; 4 | --light-main: #90183c; 5 | --border-radius: 10px; 6 | --box-shadow: 10px 10px 25px -19px #2f2f2f8f; 7 | --linear-background: linear-gradient(0deg, var(--main), var(--light-main)); 8 | } 9 | /*HTML Elements*/ 10 | * { 11 | margin: 0; 12 | box-sizing: border-box; 13 | } 14 | body { 15 | color: #333; 16 | background: #eeeeee; 17 | font-family: 'Nunito', sans-serif; 18 | /* font-family: sans-serif; */ 19 | overflow-x: hidden; 20 | } 21 | body::-webkit-scrollbar-track { 22 | background-color: #f5f5f5; 23 | border-radius: 10px; 24 | } 25 | body::-webkit-scrollbar { 26 | width: 10px; 27 | background-color: #f5f5f5; 28 | } 29 | body::-webkit-scrollbar-thumb { 30 | border-radius: 10px; 31 | background-image: -webkit-gradient( 32 | linear, 33 | left bottom, 34 | left top, 35 | color-stop(0.44, #90183c), 36 | color-stop(0.72, #720022), 37 | color-stop(0.86, #90183c) 38 | ); 39 | } 40 | /*Classes*/ 41 | .header { 42 | width: 100%; 43 | height: 80px; 44 | background: var(--linear-background); 45 | color: white; 46 | position: fixed; 47 | top: 0; 48 | z-index: 10; 49 | } 50 | .logo-wrap { 51 | display: flex; 52 | align-items: center; 53 | height: 100%; 54 | } 55 | .container { 56 | width: 100%; 57 | max-width: 1460px; 58 | margin: 0 auto; 59 | padding: 0 30px; 60 | } 61 | .header-container { 62 | width: 100%; 63 | max-width: 1660px; 64 | margin: 0 auto; 65 | padding: 0 30px; 66 | } 67 | .back-button { 68 | letter-spacing: 0.5px; 69 | padding: 18px 20px; 70 | border-radius: 5px; 71 | background: #0000002c; 72 | text-transform: uppercase; 73 | font-size: 14px; 74 | cursor: pointer; 75 | } 76 | .relative { 77 | position: relative; 78 | } 79 | .flex { 80 | display: flex; 81 | } 82 | .flex-center { 83 | display: flex; 84 | justify-content: center; 85 | align-items: center; 86 | } 87 | .flex-between { 88 | display: flex; 89 | justify-content: space-between; 90 | align-items: center; 91 | } 92 | .back { 93 | position: absolute; 94 | left: 0; 95 | cursor: pointer; 96 | color: white; 97 | text-decoration: none; 98 | } 99 | .score-section { 100 | height: 150px; 101 | } 102 | .title-section .title { 103 | padding-bottom: 10px; 104 | text-transform: capitalize; 105 | color: rgb(87, 87, 87); 106 | } 107 | .quiz { 108 | padding-top: 80px; 109 | } 110 | .quiz-wrap { 111 | display: flex; 112 | flex-wrap: wrap-reverse; 113 | } 114 | .quiz-container { 115 | width: 100%; 116 | background: white; 117 | min-height: 520px; 118 | border-radius: var(--border-radius); 119 | margin-right: 10px; 120 | box-shadow: var(--box-shadow); 121 | } 122 | .question-wrap { 123 | position: relative; 124 | height: 420px; 125 | overflow: hidden; 126 | background: #5f1735; 127 | } 128 | .question-area { 129 | height: 100%; 130 | width: 100%; 131 | background: white; 132 | display: none; 133 | animation-duration: .7s; 134 | padding: 10px; 135 | } 136 | .question { 137 | text-align: center; 138 | padding: 30px 0; 139 | max-width: 750px; 140 | margin: auto; 141 | } 142 | .answers { 143 | width: 600px; 144 | margin: 50px auto 0 auto; 145 | } 146 | .answer { 147 | padding: 5px; 148 | min-height: 30px; 149 | background: #5f1735; 150 | border-radius: 5px; 151 | color: white; 152 | margin-top: 5px; 153 | cursor: pointer; 154 | align-items: center; 155 | } 156 | .answer-button { 157 | height: 100%; 158 | width: 40px; 159 | } 160 | .answer-circle { 161 | width: 15px; 162 | height: 15px; 163 | border-radius: 50%; 164 | border: solid 2px white; 165 | } 166 | .answer-text { 167 | font-weight: 300; 168 | padding-left: 10px; 169 | } 170 | .quiz-over { 171 | text-align: center; 172 | padding-top: 60px; 173 | } 174 | .start-screen { 175 | position: absolute; 176 | background: white; 177 | width: 100%; 178 | height: 100%; 179 | text-align: center; 180 | animation-duration: .7s; 181 | } 182 | .start-screen h1 { 183 | padding: 130px 0 10px 0; 184 | font-size: 50px; 185 | text-transform: uppercase; 186 | } 187 | .start-screen h3 { 188 | padding: 10px 0; 189 | color: rgb(75, 75, 75); 190 | font-weight: 400; 191 | } 192 | .start-btn { 193 | height: 50px; 194 | width: 200px; 195 | display: flex; 196 | justify-content: center; 197 | align-items: center; 198 | text-transform: capitalize; 199 | letter-spacing: 2px; 200 | color: white; 201 | border-radius: 50px; 202 | background: var(--linear-background); 203 | cursor: pointer; 204 | transition: 0.5s; 205 | margin: 20px auto; 206 | } 207 | .start-btn:hover { 208 | transform: scale(0.9); 209 | } 210 | .quiz-footer { 211 | height: 100px; 212 | background: var(--linear-background); 213 | border-bottom-left-radius: var(--border-radius); 214 | border-bottom-right-radius: var(--border-radius); 215 | display: flex; 216 | justify-content: space-around; 217 | align-items: center; 218 | } 219 | .slide-amount { 220 | color: #ffffff; 221 | font-weight: 100; 222 | font-size: 14px; 223 | } 224 | .slides { 225 | width: 100%; 226 | height: 100%; 227 | } 228 | .quiz-section-wrap { 229 | flex-grow: 1; 230 | } 231 | .quiz-selector-wrap { 232 | flex-grow: 1; 233 | } 234 | .quiz-section-chooser { 235 | width: 400px; 236 | height: 520px; 237 | background: var(--linear-background); 238 | border-radius: var(--border-radius); 239 | margin-left: 10px; 240 | box-shadow: var(--box-shadow); 241 | color: white; 242 | padding: 0 40px; 243 | } 244 | .chooser-title-wrap { 245 | height: 70px; 246 | display: flex; 247 | align-items: flex-end; 248 | } 249 | .number-title { 250 | letter-spacing: 0.5px; 251 | padding-bottom: 10px; 252 | } 253 | .chooser-button { 254 | height: 90px; 255 | display: flex; 256 | align-items: center; 257 | justify-content: space-between; 258 | border-bottom: solid white 1px; 259 | cursor: pointer; 260 | } 261 | .chooser-button:last-child { 262 | border: none; 263 | } 264 | .number { 265 | flex: 1; 266 | } 267 | .chooser-text { 268 | flex: 6; 269 | } 270 | .fill { 271 | background: white; 272 | } 273 | .chooser-title { 274 | text-transform: capitalize; 275 | letter-spacing: 0.5px; 276 | font-weight: bold; 277 | padding-bottom: 2px; 278 | font-size: 18px; 279 | } 280 | .chooser-subtitle { 281 | color: #e6e6e6; 282 | text-transform: capitalize; 283 | letter-spacing: 0.5px; 284 | font-size: 14px; 285 | font-weight: 500; 286 | } 287 | .chooser-button-wrap { 288 | display: flex; 289 | justify-content: center; 290 | align-items: center; 291 | flex: 1; 292 | height: 100%; 293 | } 294 | .circle { 295 | width: 25px; 296 | height: 25px; 297 | border-radius: 50%; 298 | border: solid 3px white; 299 | } 300 | /* IDs */ 301 | #logo { 302 | width: 55px; 303 | height: 55px; 304 | border-radius: 50%; 305 | margin-right: 20px; 306 | border: solid 2px var(--main); 307 | } 308 | /* Nested Elements */ 309 | .header h3 { 310 | padding: 30px 20px; 311 | } 312 | /* Media Queries */ 313 | @media (max-width: 1024px) { 314 | .quiz-selector-wrap, .quiz-sections-wrap { 315 | width: 100%; 316 | 317 | } 318 | .quiz-section-chooser { 319 | margin: 10px auto 50px auto; 320 | 321 | } 322 | } 323 | @media (max-width: 600px) { 324 | .quiz-section-chooser { 325 | width: 100%; 326 | } 327 | .answers { 328 | width: 100%; 329 | } 330 | } 331 | /* keyframes */ 332 | -------------------------------------------------------------------------------- /quiz/quiz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Quiz 10 | 11 | 12 |
13 |
14 |
15 | 16 |

Easy to QUIZ

17 |
18 |
Home
19 |
20 |
21 |
22 |
23 |
24 |
25 |

html

26 |
27 |
28 |
29 |
30 |
31 |
32 |

html quiz

33 |

Test your html skills out.

34 |
start
35 |
36 |
37 |
38 |

39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |

48 |
49 |
50 |
51 |
52 |
53 |
54 |

Choose Quiz

55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /quiz/quiz.js: -------------------------------------------------------------------------------- 1 | $(".back-button").click(() => (window.location = "../index.html")); 2 | 3 | let remainingTime = 30; 4 | let quizEnded = false; 5 | let chosenSection = ""; 6 | let correct = 0; 7 | 8 | const questionSections = [ 9 | { 10 | number: 1, 11 | title: "html", 12 | totalQuestions: htmlQuestions.length, 13 | }, 14 | { 15 | number: 2, 16 | title: "css", 17 | totalQuestions: cssQuestions.length, 18 | }, 19 | { 20 | number: 3, 21 | title: "javascript", 22 | totalQuestions: javascriptQuestions.length, 23 | }, 24 | { 25 | number: 4, 26 | title: "Data Structure", 27 | totalQuestions: dataStructure.length, 28 | }, 29 | { 30 | number: 5, 31 | title: "SQL", 32 | totalQuestions: sqlQuestions.length, 33 | } 34 | ]; 35 | 36 | const addToCorrect = () => correct++; 37 | 38 | const answer = (answer) => { 39 | const text = answer.includes("<") 40 | ? `${answer.replace(//g, ">")}` 41 | : answer; 42 | 43 | return `
44 |
45 |
46 |
47 |
48 |

${text}

49 |
50 |
`; 51 | }; 52 | 53 | const animateCSS = (element, animation, prefix = "animate__") => 54 | new Promise((resolve, reject) => { 55 | const animationName = `${prefix}${animation}`; 56 | element.addClass(`${prefix}animated ${animationName}`); 57 | 58 | const handleAnimationEnd = () => { 59 | element.removeClass(`${prefix}animated ${animationName}`); 60 | element.off("animationend", handleAnimationEnd); 61 | 62 | resolve("Animation ended"); 63 | }; 64 | 65 | element.on("animationend", handleAnimationEnd); 66 | }); 67 | 68 | const cleanAnswers = () => { 69 | $(".answers").html(null); 70 | }; 71 | 72 | const reset = () => { 73 | correct = 0; 74 | quizEnded = false; 75 | remainingTime = 30; 76 | }; 77 | 78 | const showScore = (total) => { 79 | quizEnded = true; 80 | $(".quiz-over").append( 81 | `

You scored ${correct} out of ${total}

` 82 | ); 83 | }; 84 | 85 | const slideUpAnimation = async (question) => { 86 | const questionArea = $(".question-area"); 87 | await animateCSS(questionArea, "fadeOutUp"); 88 | 89 | showQuestion(++question); 90 | 91 | animateCSS(questionArea, "fadeInUp"); 92 | }; 93 | 94 | // const startTimer = (question) => { 95 | // let interval = setInterval(() => { 96 | // remainingTime--; 97 | // if (remainingTime < 1) { 98 | // slideUpAnimation(question) 99 | // remainingTime = 30 100 | // clearInterval(interval); 101 | // } 102 | // }, 1000); 103 | // }; 104 | 105 | function showQuestion(question) { 106 | $(".end-score").remove(); 107 | cleanAnswers(); 108 | // startTimer(question); 109 | const currentQuestion = chosenSection[question]; 110 | const questionText = currentQuestion.question.endsWith("?") 111 | ? currentQuestion.question 112 | : currentQuestion.question + "?"; 113 | $(".slide-amount").text(`${question + 1} / ${chosenSection.length}`); 114 | $(".question").text(questionText); 115 | $.each(currentQuestion.answers, (index, item) => { 116 | $(".answers").append(answer(item)); 117 | }); 118 | const correctAnswer = currentQuestion.correctAnswer; 119 | const answerNodes = $(".answer"); 120 | $.each(answerNodes, (index, node) => { 121 | $(node).click(function () { 122 | if (!quizEnded) { 123 | $(this).find(".answer-circle").css("background", "white"); 124 | const textNode = $(this).find(".answer-text"); 125 | const text = textNode.text().toLowerCase(); 126 | if (text === correctAnswer.toLowerCase()) { 127 | addToCorrect(); 128 | } 129 | if (question < chosenSection.length - 1) { 130 | slideUpAnimation(question); 131 | } else { 132 | showScore(chosenSection.length); 133 | } 134 | } 135 | }); 136 | }); 137 | } 138 | 139 | const startQuiz = async () => { 140 | reset(); 141 | const startScreen = $(".start-screen"); 142 | const questionArea = $(".question-area"); 143 | await animateCSS(startScreen, "fadeOutUp"); 144 | startScreen.hide(); 145 | questionArea.show(); 146 | showQuestion(0); 147 | animateCSS(questionArea, "fadeInUp"); 148 | }; 149 | 150 | const slideLeftAnimation = async ({ title }, firstLoad) => { 151 | const startScreen = $(".start-screen"); 152 | const questionArea = $(".question-area"); 153 | const startScreenHidden = startScreen.css("display") === "none"; 154 | $(".title").text(title); 155 | 156 | if (startScreenHidden) { 157 | await animateCSS(questionArea, "backOutDown"); 158 | questionArea.hide(); 159 | startScreen.show(); 160 | 161 | $(".start-screen h1").text(`${title} quiz`); 162 | $(".start-screen h3").text(`Test your ${title} skills out.`); 163 | await animateCSS(startScreen, "backInDown"); 164 | } else { 165 | if (!firstLoad) { 166 | await animateCSS(startScreen, "bounceOutRight"); 167 | } 168 | 169 | $(".start-screen h1").text(`${title} quiz`); 170 | $(".start-screen h3").text(`Test your ${title} skills out.`); 171 | if (!firstLoad) { 172 | animateCSS(startScreen, "bounceInLeft"); 173 | } 174 | } 175 | }; 176 | 177 | const updateQuiz = (section) => { 178 | const currentSection = sections[section]; 179 | chosenSection = currentSection; 180 | $(".slide-amount").text(""); 181 | }; 182 | 183 | const changeSection = (number, firstLoad) => { 184 | const section = number - 1; 185 | 186 | $(".circle").each((index, item) => { 187 | if (index === section) { 188 | $(item).addClass("fill"); 189 | } else { 190 | $(item).removeClass("fill"); 191 | } 192 | }); 193 | 194 | updateQuiz(section); 195 | slideLeftAnimation(questionSections[section], firstLoad); 196 | }; 197 | 198 | const chooserButton = ({ number, title, totalQuestions }) => { 199 | return `
200 |
201 |

${number}

202 |
203 |
204 |
205 |

${title}

206 |

${totalQuestions} Questions

207 |
208 |
209 |
210 |
211 |
212 |
`; 213 | }; 214 | 215 | $.each(questionSections, (index, item) => { 216 | $(".buttons").append(chooserButton(item)); 217 | }); 218 | 219 | changeSection(1, true); 220 | 221 | $(".start-btn").click(startQuiz); 222 | -------------------------------------------------------------------------------- /useful-links/img/CodeCombat-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/CodeCombat-Logo.png -------------------------------------------------------------------------------- /useful-links/img/CodinGame_logo.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/CodinGame_logo.svg.png -------------------------------------------------------------------------------- /useful-links/img/HackerRank_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/HackerRank_logo.png -------------------------------------------------------------------------------- /useful-links/img/academing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/academing.png -------------------------------------------------------------------------------- /useful-links/img/animate-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/animate-css.png -------------------------------------------------------------------------------- /useful-links/img/books.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/books.png -------------------------------------------------------------------------------- /useful-links/img/challenge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/challenge.png -------------------------------------------------------------------------------- /useful-links/img/codepen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/codepen.png -------------------------------------------------------------------------------- /useful-links/img/codepip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/codepip.png -------------------------------------------------------------------------------- /useful-links/img/codewars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/codewars.png -------------------------------------------------------------------------------- /useful-links/img/codier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/codier.png -------------------------------------------------------------------------------- /useful-links/img/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/cover.jpg -------------------------------------------------------------------------------- /useful-links/img/crackingthecodinginterviewcover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/crackingthecodinginterviewcover.jpg -------------------------------------------------------------------------------- /useful-links/img/cs50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/cs50.png -------------------------------------------------------------------------------- /useful-links/img/e2g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/e2g.png -------------------------------------------------------------------------------- /useful-links/img/edabit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/edabit.png -------------------------------------------------------------------------------- /useful-links/img/flexbox.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/flexbox.ico -------------------------------------------------------------------------------- /useful-links/img/freecodecamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/freecodecamp.png -------------------------------------------------------------------------------- /useful-links/img/freepik.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/freepik.png -------------------------------------------------------------------------------- /useful-links/img/games.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/games.png -------------------------------------------------------------------------------- /useful-links/img/html&css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/html&css.jpg -------------------------------------------------------------------------------- /useful-links/img/javabeginnersguide.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/javabeginnersguide.jpg -------------------------------------------------------------------------------- /useful-links/img/javascript&jquery.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/javascript&jquery.jpg -------------------------------------------------------------------------------- /useful-links/img/javascriptforkids.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/javascriptforkids.jpg -------------------------------------------------------------------------------- /useful-links/img/khanacademy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/khanacademy.png -------------------------------------------------------------------------------- /useful-links/img/learningwebdesign.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/learningwebdesign.jpg -------------------------------------------------------------------------------- /useful-links/img/learnpythonorg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/learnpythonorg.png -------------------------------------------------------------------------------- /useful-links/img/learnpythonthehardway.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/learnpythonthehardway.jpg -------------------------------------------------------------------------------- /useful-links/img/learntocode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/learntocode.png -------------------------------------------------------------------------------- /useful-links/img/mobil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/mobil.png -------------------------------------------------------------------------------- /useful-links/img/netninja.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/netninja.jpg -------------------------------------------------------------------------------- /useful-links/img/online-course.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/online-course.jpeg -------------------------------------------------------------------------------- /useful-links/img/pngguru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/pngguru.png -------------------------------------------------------------------------------- /useful-links/img/podcast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/podcast.png -------------------------------------------------------------------------------- /useful-links/img/programminghero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/programminghero.png -------------------------------------------------------------------------------- /useful-links/img/realpython.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/realpython.png -------------------------------------------------------------------------------- /useful-links/img/shield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/shield.png -------------------------------------------------------------------------------- /useful-links/img/shortcutfoo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/shortcutfoo.png -------------------------------------------------------------------------------- /useful-links/img/skillcrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/skillcrush.png -------------------------------------------------------------------------------- /useful-links/img/sololearn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/sololearn.png -------------------------------------------------------------------------------- /useful-links/img/sourcerer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/sourcerer.png -------------------------------------------------------------------------------- /useful-links/img/stefan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/stefan.png -------------------------------------------------------------------------------- /useful-links/img/study.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/study.png -------------------------------------------------------------------------------- /useful-links/img/topcoder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/topcoder.png -------------------------------------------------------------------------------- /useful-links/img/traversy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/traversy.png -------------------------------------------------------------------------------- /useful-links/img/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/web.png -------------------------------------------------------------------------------- /useful-links/img/work.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/work.gif -------------------------------------------------------------------------------- /useful-links/img/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/youtube.png -------------------------------------------------------------------------------- /useful-links/img/zombie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/useful-links/img/zombie.png -------------------------------------------------------------------------------- /useful-links/useful-links.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #4d50fa; 3 | --peach: #dba7a2; 4 | --light-main: #2e4bcc; 5 | --border-radius: 10px; 6 | --box-shadow: 10px 10px 25px -19px #2f2f2f8f; 7 | --linear-background: linear-gradient(0deg, var(--main), var(--light-main)); 8 | } 9 | /* HTML Elements */ 10 | * { 11 | margin: 0; 12 | box-sizing: border-box; 13 | } 14 | html { 15 | scroll-behavior: smooth; 16 | } 17 | body { 18 | margin-top: 8rem; 19 | color: #333; 20 | background: #6aafff; 21 | font-family: 'Nunito', sans-serif; 22 | /* font-family: sans-serif; */ 23 | overflow-x: hidden; 24 | } 25 | h1 { 26 | text-align: center; 27 | font-size: 2.5rem; 28 | } 29 | hr { 30 | height: 3px; 31 | margin: 5px; 32 | background: #fff; 33 | } 34 | body::-webkit-scrollbar-track { 35 | background-color: #f5f5f5; 36 | border-radius: 10px; 37 | } 38 | body::-webkit-scrollbar { 39 | width: 10px; 40 | background-color: #f5f5f5; 41 | } 42 | body::-webkit-scrollbar-thumb { 43 | border-radius: 10px; 44 | background: #000; 45 | } 46 | input { 47 | display: none; 48 | } 49 | iframe { 50 | display: block; 51 | margin: 2rem auto; 52 | } 53 | footer { 54 | width: 100%; 55 | height: 3rem; 56 | background: var(--linear-background); 57 | } 58 | figure { 59 | position: relative; 60 | width: 100%; 61 | margin: 0; 62 | padding: 0; 63 | transition: all ease 0.5s; 64 | transform-style: preserve-3d; 65 | transform: perspective(600px) rotateY(0deg); 66 | } 67 | /* Classes */ 68 | .header { 69 | width: 100%; 70 | background: var(--linear-background); 71 | color: white; 72 | position: fixed; 73 | top: 0; 74 | z-index: 10; 75 | } 76 | .logo-wrap { 77 | display: flex; 78 | align-items: center; 79 | height: 100%; 80 | } 81 | .container { 82 | width: 100%; 83 | max-width: 1460px; 84 | margin: 0 auto; 85 | padding: 0 30px; 86 | } 87 | .header-container { 88 | width: 100%; 89 | max-width: 1660px; 90 | margin: 0 auto; 91 | padding: 0 30px; 92 | } 93 | .back-button { 94 | letter-spacing: 0.5px; 95 | padding: 18px 20px; 96 | border-radius: 5px; 97 | background: #3b69f2; 98 | text-transform: uppercase; 99 | font-size: 14px; 100 | color: #fff; 101 | cursor: pointer; 102 | text-shadow: 1px 1px #000; 103 | text-decoration: none; 104 | } 105 | .back-button:hover { 106 | transform: scale(1.1); 107 | transition: 0.3s; 108 | } 109 | .flex-between { 110 | display: flex; 111 | justify-content: space-between; 112 | align-items: center; 113 | } 114 | .menu { 115 | position: fixed; 116 | width: 20rem; 117 | top: 5.4rem; 118 | z-index: 1000; 119 | } 120 | .btn-menu { 121 | width: 5rem; 122 | background: #2e4bcc; 123 | text-align: center; 124 | padding: 10px; 125 | text-shadow: 1px 1px #000; 126 | border-radius: 0 10px 10px 0; 127 | color: #fff; 128 | margin-bottom: 0.1rem; 129 | } 130 | .btn-menu:hover { 131 | cursor: pointer; 132 | transform: scale(1.1); 133 | transition: 0.5s; 134 | } 135 | .categories { 136 | position: relative; 137 | transition: 0.5s; 138 | } 139 | .btn-instructions { 140 | width: 16rem; 141 | background: #3b69f2; 142 | text-align: center; 143 | margin: auto; 144 | padding: 5px; 145 | text-shadow: 1px 1px #000; 146 | border-radius: 10px; 147 | color: #fff; 148 | } 149 | .btn-instructions:hover { 150 | cursor: pointer; 151 | transform: scale(1.1); 152 | transition: 0.5s; 153 | } 154 | .description { 155 | height: 20rem; 156 | margin: 1rem; 157 | font-size: 1.3rem; 158 | line-height: 2rem; 159 | overflow: auto; 160 | transition: all 1s; 161 | opacity: 1; 162 | } 163 | .info-container { 164 | width: 100%; 165 | background: #6aafff; 166 | } 167 | .info-header { 168 | display: flex; 169 | align-items: center; 170 | justify-content: start; 171 | font-size: 1.1rem; 172 | } 173 | .list { 174 | width: 70%; 175 | margin: auto; 176 | } 177 | .container-of-all-cards { 178 | width: 70%; 179 | margin: 1rem auto; 180 | display: flex; 181 | flex-direction: row; 182 | flex-wrap: wrap; 183 | justify-content: center; 184 | } 185 | .card-container { 186 | margin: 1rem; 187 | width: 28%; 188 | } 189 | .front, 190 | .back { 191 | width: 100%; 192 | height: 21.5rem; 193 | object-fit: cover; 194 | } 195 | .front { 196 | display: block; 197 | } 198 | .back { 199 | position: absolute; 200 | top: 0; 201 | padding: 5px; 202 | color: #fff; 203 | transform: perspective(600px) rotateY(180deg); 204 | backface-visibility: hidden; 205 | overflow: auto; 206 | background: rgba(0,0,0,0.7); 207 | } 208 | /* IDs */ 209 | #logo { 210 | width: 55px; 211 | height: 55px; 212 | border-radius: 50%; 213 | margin-right: 20px; 214 | border: solid 2px var(--main); 215 | } 216 | #instructions:checked ~ .description { 217 | height: 0; 218 | opacity: 0; 219 | } 220 | #menu:checked ~ .categories { 221 | margin-left: -100%; 222 | opacity: 0; 223 | } 224 | #cover-img { 225 | display: block; 226 | margin: 2rem auto; 227 | width: 60%; 228 | border: 2px solid #000; 229 | } 230 | /* Nested Elements */ 231 | .header h3 { 232 | padding: 30px 20px; 233 | } 234 | .btn-instructions label:hover { 235 | cursor: pointer; 236 | } 237 | .btn-menu label:hover { 238 | cursor: pointer; 239 | } 240 | .categories ul { 241 | background: var(--linear-background); 242 | position: absolute; 243 | text-shadow: 1px 1px #000; 244 | border-radius: 0 10px 10px 0; 245 | list-style: none; 246 | padding: 0; 247 | } 248 | .categories li { 249 | text-align: center; 250 | padding: 1rem; 251 | } 252 | .categories li:hover { 253 | border-bottom: 1px solid #000; 254 | background: rgba(0,0,0,0.1); 255 | } 256 | .categories a { 257 | text-decoration: none; 258 | color: #fff; 259 | } 260 | .description p { 261 | margin: 1rem 0; 262 | } 263 | .info-header h3 { 264 | font-size: 1.5rem; 265 | } 266 | .info-header img { 267 | width: 4rem; 268 | margin: 2rem 2rem 2rem 0; 269 | } 270 | .list p { 271 | padding-bottom: 2rem; 272 | } 273 | .list img { 274 | width: 5rem; 275 | margin-left: 1rem; 276 | transition: 0.3s; 277 | } 278 | .list img:hover { 279 | transform: scale(1.2); 280 | } 281 | .list ul { 282 | padding: 0; 283 | } 284 | .list li { 285 | display: flex; 286 | align-items: center; 287 | justify-content: space-between; 288 | height: 7rem; 289 | margin-bottom: 1rem; 290 | box-shadow: 0 2px 2px rgba(80, 80, 80, 0.582); 291 | padding-right: 2rem; 292 | } 293 | .list li:hover { 294 | transition: 0.3s; 295 | background: rgba(255,255,255,0.2); 296 | } 297 | .card-container:hover figure { 298 | -webkit-transform: perspective(600px) rotateY(180deg); 299 | -ms-transform: perspective(600px) rotateY(180deg); 300 | -o-transform: perspective(600px) rotateY(180deg); 301 | transform: perspective(600px) rotateY(180deg); 302 | 303 | -webkit-box-shadow: -1px 1px 19px 0px rgba(3,1,3,0.44); 304 | -moz-box-shadow: -1px 1px 19px 0px rgba(3,1,3,0.44); 305 | box-shadow: -1px 1px 19px 0px rgba(3,1,3,0.44); 306 | } 307 | .card-container:hover img { 308 | filter: blur(3px); 309 | } 310 | 311 | /* Media Queries */ 312 | @media (max-width: 768px){ 313 | .list { 314 | width: 95%; 315 | } 316 | .list p { 317 | text-align: justify; 318 | } 319 | .list img { 320 | margin-right: 2rem; 321 | } 322 | .container-of-all-cards { 323 | width: 95%; 324 | } 325 | .card-container { 326 | width: 35%; 327 | } 328 | .front, 329 | .back { 330 | height: 20rem; 331 | } 332 | .menu { 333 | top: 5.4rem; 334 | } 335 | iframe { 336 | width: 100%; 337 | } 338 | } 339 | @media (max-width: 450px) { 340 | .card-container { 341 | margin: 0.5rem; 342 | width: 45%; 343 | } 344 | .front, 345 | .back { 346 | height: 16.5rem; 347 | } 348 | .menu { 349 | top: 7rem; 350 | } 351 | body { 352 | margin-top: 10rem; 353 | } 354 | } 355 | @media (max-width: 400px){ 356 | .card-container { 357 | margin: 0.4rem; 358 | width: 46%; 359 | } 360 | .front, 361 | .back { 362 | height: 14rem; 363 | } 364 | .menu { 365 | top: 8.6rem; 366 | } 367 | body { 368 | margin-top: 11rem; 369 | } 370 | } 371 | /* Keyframes */ 372 | -------------------------------------------------------------------------------- /widgets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/widgets/.DS_Store -------------------------------------------------------------------------------- /widgets/images/day.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /widgets/images/icons/1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 19 | 20 | -------------------------------------------------------------------------------- /widgets/images/icons/11.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 13 | 14 | -------------------------------------------------------------------------------- /widgets/images/icons/12.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 13 | 14 | -------------------------------------------------------------------------------- /widgets/images/icons/13.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 22 | 23 | -------------------------------------------------------------------------------- /widgets/images/icons/14.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /widgets/images/icons/15.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 12 | 13 | -------------------------------------------------------------------------------- /widgets/images/icons/16.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 12 | 13 | -------------------------------------------------------------------------------- /widgets/images/icons/17.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /widgets/images/icons/18.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | -------------------------------------------------------------------------------- /widgets/images/icons/19.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 18 | 19 | -------------------------------------------------------------------------------- /widgets/images/icons/2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 20 | 21 | -------------------------------------------------------------------------------- /widgets/images/icons/20.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /widgets/images/icons/21.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /widgets/images/icons/22.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 15 | 16 | -------------------------------------------------------------------------------- /widgets/images/icons/23.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 17 | 18 | -------------------------------------------------------------------------------- /widgets/images/icons/24.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 15 | 16 | -------------------------------------------------------------------------------- /widgets/images/icons/25.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 17 | 18 | -------------------------------------------------------------------------------- /widgets/images/icons/26.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 17 | 18 | -------------------------------------------------------------------------------- /widgets/images/icons/27.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 18 | 19 | -------------------------------------------------------------------------------- /widgets/images/icons/3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 20 | 21 | -------------------------------------------------------------------------------- /widgets/images/icons/30.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /widgets/images/icons/31.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /widgets/images/icons/32.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | -------------------------------------------------------------------------------- /widgets/images/icons/33.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /widgets/images/icons/34.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /widgets/images/icons/35.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 16 | 17 | -------------------------------------------------------------------------------- /widgets/images/icons/36.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 16 | 17 | -------------------------------------------------------------------------------- /widgets/images/icons/37.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 17 | 18 | -------------------------------------------------------------------------------- /widgets/images/icons/38.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 16 | 17 | -------------------------------------------------------------------------------- /widgets/images/icons/39.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /widgets/images/icons/4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 20 | 21 | -------------------------------------------------------------------------------- /widgets/images/icons/40.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /widgets/images/icons/41.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 18 | 19 | -------------------------------------------------------------------------------- /widgets/images/icons/42.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 18 | 19 | -------------------------------------------------------------------------------- /widgets/images/icons/43.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /widgets/images/icons/44.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /widgets/images/icons/5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /widgets/images/icons/6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /widgets/images/icons/7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /widgets/images/icons/8.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /widgets/images/night.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /widgets/waterTracker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Water Tracker 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |

Water Tracker

23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | You have drunk 32 | 0 ml 33 | water. 34 |
35 |
36 | 37 | 38 |
39 |
40 | Your goal is to drink
water. 41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 |
49 |
50 |
51 |

Statistics

52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
Average
62 |
63 |
64 |
65 |
You
66 |
67 |
68 | Water Consumption Today 69 |
70 |
71 |
72 |
73 | 78 | 79 | -------------------------------------------------------------------------------- /widgets/waterTracker/main.css: -------------------------------------------------------------------------------- 1 | body{ 2 | --color1: #ACB6E5; 3 | --color2: #74ebd5; 4 | --tranparent-green: #74ebd515; 5 | font-family: 'Open Sans', sans-serif; 6 | } 7 | 8 | html, body{ 9 | height: 100%; 10 | margin: 0; 11 | overflow: hidden; 12 | } 13 | 14 | .brand{ 15 | text-align: center; 16 | } 17 | 18 | .main{ 19 | display: flex; 20 | width: calc(100% - 20px); 21 | height: calc(100vh - 2rem - 40px); 22 | flex-flow: row wrap; 23 | justify-content: center; 24 | align-items: flex-start; 25 | margin: 10px; 26 | } 27 | @supports (-webkit-text-stroke: 1px black) { 28 | h1 { 29 | -webkit-text-stroke: 0.2px var(--color1); 30 | -webkit-text-fill-color: var(--color2); 31 | } 32 | } 33 | 34 | h1{ 35 | font-family: 'Titillium Web', sans-serif; 36 | } 37 | 38 | .setGoalBox{ 39 | display: flex; 40 | align-items: center; 41 | justify-content: center; 42 | flex-wrap: wrap; 43 | padding: 10px; 44 | margin: 5px; 45 | } 46 | 47 | .goal{ 48 | margin: 5px; 49 | } 50 | 51 | .goal div{ 52 | display: inline; 53 | } 54 | 55 | #limit{ 56 | color: var(--color1); 57 | filter: brightness(0.5); 58 | } 59 | 60 | .waterGlassContainer{ 61 | display: flex; 62 | width: 200px; 63 | height: 200px; 64 | align-items: flex-end; 65 | padding: 10px; 66 | margin: 10px; 67 | } 68 | 69 | .glass{ 70 | perspective: 100px; 71 | width: 90%; 72 | height: 90%; 73 | margin: auto; 74 | } 75 | 76 | #water { 77 | margin: auto; 78 | width: 70%; 79 | height: 100%; 80 | background-color: hsl(0, 0%, 85%); 81 | transform: rotateX(-10deg); 82 | transition: all 0.2s ease-in-out; 83 | color: #fff; 84 | font-size: 2em; 85 | border-top-left-radius: 5px; 86 | border-top-right-radius: 5px; 87 | display: flex; 88 | align-items: center; 89 | justify-content: center; 90 | } 91 | 92 | /* Buttons */ 93 | .btn{ 94 | font-family: 'Open Sans', sans-serif; 95 | margin: 10px; 96 | outline: none; 97 | border: none; 98 | cursor: pointer; 99 | height: 2rem; 100 | background: #74ebd5; /* fallback for old browsers */ 101 | border-radius: 20px; 102 | color: #fff; 103 | background: -webkit-linear-gradient(to right, var(--color1), var(--color2)); /* Chrome 10-25, Safari 5.1-6 */ 104 | background: linear-gradient(to right, var(--color1), var(--color2)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 105 | transition: all 0.2s ease-in-out; 106 | } 107 | 108 | .btn:hover{ 109 | filter: brightness(0.9); 110 | } 111 | 112 | .controlButtons{ 113 | text-align: center; 114 | } 115 | 116 | .delBtn { 117 | background: red; 118 | border-radius: 4px; 119 | } 120 | 121 | /* Input */ 122 | 123 | input{ 124 | border-radius: 20px; 125 | } 126 | 127 | input[type=number] { 128 | width: 15rem; 129 | height: 2rem; 130 | text-align: center; 131 | font-family: 'Open Sans', sans-serif; 132 | box-shadow: 0 0 5px var(--color2); 133 | border: none; 134 | -moz-appearance:textfield; 135 | } 136 | 137 | input[type=number]::-webkit-inner-spin-button { 138 | -webkit-appearance: none; 139 | 140 | } 141 | 142 | /* 143 | ---------------- 144 | Modal 145 | ---------------- 146 | */ 147 | 148 | .modal{ 149 | display: flex; 150 | justify-content: center; 151 | align-items: center; 152 | position: absolute; 153 | width: 100vw; 154 | height: 100vh; 155 | margin: 0; 156 | z-index: 999; 157 | top: 0; 158 | left: 0; 159 | background: var(--tranparent-green); 160 | } 161 | 162 | /* Add Water modal */ 163 | 164 | .gModal{ 165 | background-color: #e3fef9; 166 | max-width: 500px; 167 | display: flex; 168 | justify-content: center; 169 | flex-wrap: wrap; 170 | padding: 20px; 171 | border-radius: 20px; 172 | box-shadow: 0 0 10px #ececec; 173 | } 174 | 175 | .gCloseBtn{ 176 | position: fixed; 177 | bottom: 10px; 178 | 179 | } 180 | 181 | .gContainer{ 182 | transition: all 0.2s ease-in-out; 183 | display: flex; 184 | flex-flow: column; 185 | align-items: center; 186 | flex-basis: 100px; 187 | height: 100px; 188 | cursor: pointer; 189 | border: 2px solid var(--color2); 190 | border-radius: 15px; 191 | margin: 8px; 192 | padding: 10px; 193 | color: var(--color2); 194 | } 195 | 196 | .gContainer:hover{ 197 | filter: brightness(0.8); 198 | } 199 | 200 | .gIcon{ 201 | width: 80px; 202 | } 203 | 204 | .gImg{ 205 | width: 100%; 206 | } 207 | 208 | .gText{ 209 | text-align: center; 210 | } 211 | 212 | /* Alert Modal */ 213 | 214 | .alertContainer { 215 | padding: 20px; 216 | background-color: #cffff6; 217 | border-radius: 20px; 218 | margin: 2px; 219 | } 220 | 221 | /* Water drink details modal */ 222 | 223 | .listContainer{ 224 | background-color: #cffff6; 225 | max-height: 90%; 226 | display: flex; 227 | flex-direction: column; 228 | border-radius: 20px; 229 | padding: 20px; 230 | transition: all 200ms ease-in-out; 231 | min-width: 500px; 232 | overflow: auto; 233 | } 234 | 235 | .drankDetailContainer{ 236 | display: flex; 237 | justify-content: flex-start; 238 | align-items: center; 239 | text-align: center; 240 | height: 50px; 241 | border-radius: 20px; 242 | transition: all 0.2s ease-in-out; 243 | } 244 | 245 | .drankDetailContainer:hover{ 246 | background-color: #00000010; 247 | } 248 | 249 | .qtyBox{ 250 | flex-basis: 200px; 251 | } 252 | 253 | .timeBox{ 254 | flex-basis: 200px; 255 | } 256 | 257 | /* Setting Modal */ 258 | 259 | .settingContainer { 260 | display: flex; 261 | flex-direction: column; 262 | flex-basis: 400px; 263 | padding: 20px; 264 | box-sizing: border-box; 265 | background: #cffff6; 266 | border-radius: 20px; 267 | box-shadow: 0 0 10px #c5c5ff; 268 | } 269 | 270 | .group *{ 271 | margin: 5px; 272 | } 273 | 274 | .group{ 275 | border-bottom: 1px solid hsla(0, 0%, 90%, 0.9); 276 | padding: 10px; 277 | margin: 5px; 278 | } 279 | 280 | .group > label { 281 | display: block; 282 | } 283 | 284 | /* input[type='checkBox'] { 285 | width: 32px; 286 | height: 32px; 287 | } */ 288 | 289 | select{ 290 | width: 200px; 291 | height: 40px; 292 | border-radius: 2px; 293 | border: none; 294 | appearance: none; 295 | box-shadow: 0 0 2px #ccc; 296 | } 297 | 298 | 299 | /* 300 | ------------- 301 | Footer 302 | ------------- 303 | */ 304 | 305 | 306 | footer{ 307 | position: fixed; 308 | bottom: 0; 309 | margin-top: auto; 310 | text-align: center; 311 | font-size: 0.5em; 312 | } 313 | 314 | /* Sides */ 315 | .left,.middle, .right { 316 | padding: 10px; 317 | display: flex; 318 | flex-direction: column; 319 | align-items: center; 320 | margin: 10px; 321 | background-color: #84ffe823; 322 | box-sizing: border-box; 323 | border-radius: 20px; 324 | } 325 | .middle{ 326 | flex-basis: 340px; 327 | } 328 | 329 | .right{ 330 | flex-basis: 340px; 331 | } 332 | 333 | /* Illustrations */ 334 | 335 | #illustration{ 336 | position: relative; 337 | width: 200px; 338 | height: 200px; 339 | border-radius: 50%; 340 | } 341 | 342 | .circle{ 343 | display: flex; 344 | justify-content: center; 345 | align-items: center; 346 | position: absolute; 347 | border-radius: 50%; 348 | animation: enter 1s; 349 | transition: all 0.4s ease-out; 350 | } 351 | 352 | #waterCircle{ 353 | box-shadow: 0 0 10px var(--color1); 354 | border: 2px solid var(--color1); 355 | background-color: #aeb8e577; 356 | } 357 | 358 | #averageCicle{ 359 | top: 25%; 360 | left: 25%; 361 | box-shadow: 0 0 10px var(--color2); 362 | border: 2px solid var(--color2); 363 | background-color: #74ebd5c5; 364 | } 365 | .stats { 366 | display: flex; 367 | flex-direction: column; 368 | } 369 | 370 | .stats > small { 371 | text-align: center; 372 | } 373 | 374 | .info{ 375 | display: flex; 376 | align-items: center; 377 | justify-content: space-between; 378 | } 379 | .info * { 380 | margin: 5px; 381 | } 382 | .info > div:nth-child(1) { 383 | width: 10px; 384 | height: 10px; 385 | } 386 | 387 | .info:nth-child(1) > div:nth-child(1){ 388 | background-color: var(--color1); 389 | } 390 | 391 | .info:nth-child(2) > div:nth-child(1){ 392 | background-color: var(--color2); 393 | } 394 | 395 | /* keyframes */ 396 | @keyframes enter{ 397 | 0%{ 398 | r: 5px; 399 | opacity: 0; 400 | } 401 | 100%{ 402 | r: auto; 403 | opacity: 1; 404 | } 405 | } 406 | 407 | /* Mobile Styles */ 408 | 409 | @media screen and (max-width: 700px) { 410 | body{ 411 | overflow: auto; 412 | } 413 | 414 | .listContainer{ 415 | flex-basis: 100%; 416 | min-width: auto; 417 | } 418 | } 419 | 420 | /* More styles coming in the future */ -------------------------------------------------------------------------------- /widgets/waterTracker/res/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DavidMatthewFraser/easy-to-git/058badfef838fde1ae937478be8a78a1d06e7bd4/widgets/waterTracker/res/music.mp3 -------------------------------------------------------------------------------- /widgets/waterTracker/res/water-glass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /widgets/widgets.css: -------------------------------------------------------------------------------- 1 | /* 2 | A CSS style specific to the Widgets page 3 | The Home Page styles have been linked above this stylesheet in the HTML, 4 | so they are included but can be overridden by this stylesheet when needed 5 | for the Widgets page. 6 | */ 7 | 8 | /* Page css */ 9 | :root { 10 | --galaxy-black: #190f26; 11 | --lightest-gray: #f1f1f3; 12 | --deep-purple: #392259; 13 | --medium-purple: #5a378c; 14 | --violet: #c57ee6; 15 | } 16 | body { 17 | padding: 0; 18 | margin: 0 auto; 19 | background: var(--galaxy-black); 20 | color: var(--violet); 21 | } 22 | header { 23 | display: flex; 24 | margin: 0; 25 | width: 100%; 26 | height: 100px; 27 | background: var(--deep-purple); 28 | color: white; 29 | align-items: center; 30 | } 31 | main { 32 | width: 75%; 33 | height: auto; 34 | border-radius: 5px; 35 | background-color: var(--lightest-gray); 36 | color: black; 37 | margin: 0 auto; 38 | margin-top: 50px; 39 | padding: 20px; 40 | } 41 | .widget { 42 | margin: 1em; 43 | border-radius: 5px; 44 | background-color: white; 45 | } 46 | #back-button-wrapper { 47 | flex: 2; 48 | padding-right: 15px; 49 | } 50 | .back-button { 51 | display: inline-flex; 52 | align-self: center; 53 | justify-content: center; 54 | float: right; 55 | letter-spacing: 0.5px; 56 | padding: 18px 20px; 57 | border-radius: 5px; 58 | background: var(--medium-purple); 59 | color: white; 60 | cursor: pointer; 61 | text-align: center; 62 | font-size: 1.25em; 63 | } 64 | .back-button:hover { 65 | text-decoration: none; 66 | opacity: 0.7; 67 | font-weight: 600; 68 | color: white; 69 | } 70 | #logo-wrap { 71 | flex: 2; 72 | } 73 | #logo { 74 | margin-left: 15px; 75 | } 76 | /* Show Time css */ 77 | .show-time { 78 | flex: 3; 79 | font-size: 1.3rem; 80 | text-align: center; 81 | } 82 | /* google search css */ 83 | .google-search-container { 84 | display: flex; 85 | flex-direction: row; 86 | justify-content: center; 87 | padding: 20px; 88 | background-color: transparent; 89 | } 90 | .google-search { 91 | padding: 5px; 92 | } 93 | .btn-primary { 94 | background-color: #5A378C; 95 | color: white; 96 | } 97 | .btn-div { 98 | text-align: center; 99 | } 100 | .btn-group-vertical { 101 | display: none; 102 | } 103 | /* carousel css */ 104 | .carousel-inner { 105 | background-color: var(--deep-purple); 106 | } 107 | .carousel-comment { 108 | text-align: center; 109 | padding: 1em; 110 | font-family: "cardo"; 111 | color: white; 112 | } 113 | .section-header { 114 | color: var(--violet); 115 | text-align: center; 116 | } 117 | #reviewFade { 118 | margin: 2em; 119 | } 120 | #reviewFade .carousel-control-prev, 121 | #reviewFade .carousel-control-next { 122 | opacity: 0.5; 123 | } 124 | #reviewFade .carousel-control-prev:hover, 125 | #reviewFade .carousel-control-next:hover { 126 | opacity: 1; 127 | } 128 | 129 | /* weather widget css */ 130 | 131 | .container-fluid { 132 | position: absolute; 133 | } 134 | 135 | .weather { 136 | color: white; 137 | text-align: center; 138 | flex-direction: column; 139 | } 140 | 141 | .weather h1 { 142 | font-size: 1.5rem; 143 | margin: 0; 144 | padding: 10px; 145 | } 146 | .form { 147 | margin: 20px; 148 | background-color: var(--medium-purple); 149 | border-radius: 5px; 150 | } 151 | .form input { 152 | width: 100%; 153 | font-size: 1rem; 154 | line-height: 2rem; 155 | border-bottom-left-radius: 5px; 156 | border-bottom-right-radius: 5px; 157 | border: 1px solid var(--medium-purple); 158 | } 159 | .display { 160 | margin-top: 20px; 161 | text-transform: uppercase; 162 | } 163 | .display .icon { 164 | position: relative; 165 | top: -50px; 166 | width: 100px; 167 | background: aliceblue; 168 | border-radius: 50%; 169 | margin: 0 auto; 170 | margin-bottom: -50px; 171 | } 172 | .details h5, .condition, .temperature { 173 | margin: 10px; 174 | font-size: 1rem; 175 | color: black; 176 | } 177 | /* media queries */ 178 | 179 | .rev-div p { 180 | text-align: center; 181 | padding: 1em; 182 | font-family: "cardo"; 183 | } 184 | 185 | /* Bottom */ 186 | 187 | #bottom{ 188 | display: block; 189 | height: 20px; 190 | } 191 | 192 | @media (max-width: 1024px) { 193 | .rev-div p { 194 | font-size: 1em; 195 | } 196 | } 197 | @media (max-width: 600px) { 198 | main { 199 | padding: 10px; 200 | width: 85%; 201 | } 202 | .show-time { 203 | display: flex; 204 | flex-direction: column; 205 | flex-wrap: wrap; 206 | } 207 | .back-button { 208 | padding: 8px 12px; 209 | font-size: 1.25em; 210 | } 211 | .rev-div > p { 212 | font-size: 22px; 213 | } 214 | .btn-group { 215 | display: none; 216 | } 217 | .btn-group-vertical { 218 | display: flex; 219 | flex-direction: column; 220 | align-items: center; 221 | justify-content: center; 222 | } 223 | .google-wrap { 224 | width: 100%; 225 | padding: 5px; 226 | } 227 | #reviewFade { 228 | margin: 20px 0; 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /widgets/widgets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Easy To Git Widgets 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 | 23 |
24 | 25 | 26 |
27 |
28 | Home 29 |
30 |
31 |
32 |

Add a Widget

33 |
34 | 35 |
36 |
37 |
38 |
39 | 40 | 43 |
44 |
45 | 46 | 49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 | 60 |
61 |
62 | 99 |
100 | 102 |
103 |
104 |

Weather Ninja

105 |
106 | 107 | 108 |
109 |
110 | 124 |
125 | 126 |
127 | 128 |
129 |
130 | 131 |
132 | 133 | 134 | 135 | 136 | 138 | 139 | 142 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /widgets/widgets.js: -------------------------------------------------------------------------------- 1 | // comment carousel 2 | // jquery to hide and toggle the comments until button is clicked 3 | function changeButtonName(button) { 4 | var currentBtnText = $(button).text(); 5 | var buttonAction = currentBtnText.includes('see') ? 'hide' : 'see'; 6 | $(button).text('Click to ' + buttonAction + ' Comments'); 7 | } 8 | // toggle function 9 | $('#btn_com').click(function(){ 10 | $('#randSec').toggle('swing', changeButtonName.bind(null, this)); 11 | }); 12 | 13 | // display time 14 | // added by theTradeCoder 15 | function displayTime() { 16 | setInterval(() => { 17 | const date = new Date(); 18 | $("#date").html(date.toLocaleDateString()); 19 | $("#time").html(date.toLocaleTimeString()); 20 | }, 1000); 21 | }; 22 | displayTime(); 23 | 24 | // google search option 25 | // added by Mamun Abdullah, @theTradeCoder 26 | $('#googleSearch').submit((e)=>{ 27 | e.preventDefault(); 28 | let searchTopic = $('.google-search').val(); 29 | searchTopic = searchTopic.split(' ').join('+'); 30 | let searchUrl = `https://www.google.com/search?q=${searchTopic}&oq=${searchTopic}&ie=UTF-8`; 31 | window.open(searchUrl); 32 | }); 33 | 34 | // weather ninja widget 35 | // added by Terri Fricker, based on tutorial by NetNinja 36 | const key = 'SIOTsEz9ysEBcldZ8iAw1eHDwA4F3iAg'; 37 | const cityForm = document.querySelector('#weather-form'); 38 | const display = document.querySelector('.display'); 39 | const details = document.querySelector('.details'); 40 | const image = document.querySelector('.display img'); 41 | const icon = document.querySelector('.icon img'); 42 | const getCity = async (city) => { 43 | const base = 'http://dataservice.accuweather.com/locations/v1/cities/search'; 44 | const query = `?apikey=${key}&q=${city}`; 45 | const response = await fetch(base + query); 46 | const data = await response.json(); 47 | return data[0]; 48 | } 49 | const getWeather = async (cityId) => { 50 | const base = 'http://dataservice.accuweather.com/currentconditions/v1/'; 51 | const query = `${cityId}?apikey=${key}`; 52 | const response = await fetch(base + query); 53 | const data = await response.json(); 54 | return data[0]; 55 | } 56 | const updateDisplay = data => { 57 | const cityDetails = data.cityDetails; 58 | const weather = data.weather; 59 | details.innerHTML = ` 60 |
${cityDetails.EnglishName}
61 |
${weather.WeatherText}
62 |
63 | ${weather.Temperature.Imperial.Value} 64 | °F 65 |
66 | `; 67 | let imageSource = null; 68 | if(weather.IsDayTime) { 69 | imageSource = 'images/day.svg'; 70 | } else { 71 | imageSource = 'images/night.svg'; 72 | } 73 | image.setAttribute('src', imageSource); 74 | const iconSource = `images/icons/${weather.WeatherIcon}.svg`; 75 | icon.setAttribute('src', iconSource); 76 | if (display.classList.contains('hidden')) { 77 | display.classList.remove('hidden'); 78 | } 79 | document.querySelector('.display').scrollIntoView(false); 80 | } 81 | const updateCity = async (city) => { 82 | const cityDetails = await getCity(city); 83 | const weather = await getWeather(cityDetails.Key); 84 | return { 85 | cityDetails: cityDetails, 86 | weather: weather 87 | } 88 | }; 89 | cityForm.addEventListener('submit', e => { 90 | e.preventDefault(); 91 | const city = cityForm.city.value.trim(); 92 | cityForm.reset(); 93 | updateCity(city) 94 | .then(data => updateDisplay(data)) 95 | .catch(err => console.log(err)); 96 | }); 97 | 98 | --------------------------------------------------------------------------------