-
-
Notifications
You must be signed in to change notification settings - Fork 155
London| ITP-May-25 | Anuar Duisenbek | Module-Data-Groups | Sprint-3 | Quote Generator App #736
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
@@ -3,13 +3,18 @@ | |||
<head> | |||
<meta charset="UTF-8" /> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
<title>Title here</title> | |||
<title>Quote generator app</title> | |||
<link rel="stylesheet" href="style.css" /> | |||
<script defer src="quotes.js"></script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain what defer
attribute does in script tag?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Correct, defer attribute will ensure script is downloaded in parallel but not executed until HTML document is fully parsed.
button:active { | ||
transform: translateY(2px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain what :active
pseudo-class does?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So, button moves slightly down by 2 pixels when pressed. When I release it, the button returns to its original position. This makes the button feel more realistic and user-friendly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:active
works when the button is being activated by a user, means clicked.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alright
Hi @AnuarBey. It works as intended. Well done! I left a few questions. Please have a look. |
Learners, PR Template
Self checklist
Changelist
The app displays a random motivational quote and author, with a "New quote" button that updates the content using JavaScript.
Add JS functionality and styling to Quote Generator App.
Questions
Ask any questions you have for your reviewer.