NW6| Bakhat Begum | MODULE-JS2 | Js quotes/week 3 | WEEK-3

[BakhatBegum]

Learners, PR Template

Self checklist

• I have committed my files one by one, on purpose, and for a reason
• I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
• I have tested my changes
• My changes follow the style guide
• My changes meet the requirements of this task

Changelist

When the page loads it should show a random quote from the quotes array on the screen. It should also show who said the quote.

When you click a button on the screen it should change the quote on the screen.

• Add a toggle-switch or checkbox input to your existing quote generator.
• When the switch is ON:
  • ... the generator should pick and display a new quote every 60 seconds. (When testing you will probably want to reduce this to every 5 seconds.)
  • ... the generator should display "auto-play:ON" somewhere on the page.
• When the switch is OFF
  • ... the generator should NOT change quote automatically

Questions

Is it good practice to do style in CSS?

[netlify]

✅ Deploy Preview for cute-gaufre-e4b4e5 ready!

Name	Link
🔨 Latest commit	58c13c6
🔍 Latest deploy log	https://app.netlify.com/sites/cute-gaufre-e4b4e5/deploys/65b6f500272ea900084761d8
😎 Deploy Preview	https://deploy-preview-189--cute-gaufre-e4b4e5.netlify.app/week-3/quote-generator
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[musayuksel]

It's great to see that you're using semantic elements like <section>, <h1>, <p>, and <button>.
As a further step, you can consider using a <form> and, you can improve the accessibility of your checkbox by adding a <label> element:

<form>
      <label for="check-box">Auto Play:</label>
      <input type="checkbox" id="check-box" />
 </form>

[musayuksel]

Instead of manually adding the dash ("-") to each quote in the array, you could use JS to insert it into your HTML code dynamically :)

quoteParagahraph2.innerText = `- ${currentQuote.author}`;

By using JS to handle the quote and formatting, your code becomes more flexible and easier to maintain!

[musayuksel]

Great job! In the future, consider using more meaningful variable names like authorName for better clarity and readability.

[musayuksel]

While console logs can be helpful during development and debugging, they are typically not necessary in the final version of the code. It would be helpful to remove the console log statements before submitting your code!

[musayuksel]

Your preview looks great! Well done @BakhatBegum !

[BakhatBegum]

Thank you very much for your feedback. I made changes as per your feedback.

…

On Sun, 28 Jan 2024 at 20:52, Musa ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In week-3/quote-generator/index.html <#189 (comment)> : > <p id="author"></p> <button type="button" id="new-quote">New quote</button> + <input type="checkbox" id = "check-box"/> + <p id="auto-play-text"></p> + </div> +</section> It's great to see that you're using semantic elements like <section>, <h1> , <p>, and <button>. As a further step, you can consider using a <form> and, you can improve the accessibility of your checkbox by adding a <label> element: <form> <label for="check-box">Auto Play:</label> <input type="checkbox" id="check-box" /> </form> ------------------------------ In week-3/quote-generator/quotes.js <#189 (comment)> : > @@ -25,469 +25,509 @@ function pickFromArray(choices) { const quotes = [ { quote: "Life isn't about getting and having, it's about giving and being.", - author: "Kevin Kruse", + author: "- Kevin Kruse", Instead of manually adding the dash ("-") to each quote in the array, you could use JS to insert it into your HTML code dynamically :) quoteParagahraph2.innerText = `- ${currentQuote.author}`; By using JS to handle the quote and formatting, your code becomes more flexible and easier to maintain! ------------------------------ In week-3/quote-generator/quotes.js <#189 (comment)> : > +const quoteParagahraph2 = document.getElementById("author"); +quoteParagahraph2.innerText = currentQuote.author; Great job! In the future, consider using more meaningful variable names like authorName for better clarity and readability. ------------------------------ In week-3/quote-generator/quotes.js <#189 (comment)> : > + +function getQoutes(evet){ +const quoteParagahraph = document.getElementById("quote"); +const currentQuote = pickFromArray(quotes); +quoteParagahraph.innerText = currentQuote.quote; +const quoteParagahraph2 = document.getElementById("author"); +quoteParagahraph2.innerText = currentQuote.author; + +} +getQoutes(); + +const button = document.getElementById("new-quote"); +function eventhandler(event){ + console.log("click"); + getQoutes(); +} While console logs can be helpful during development and debugging, they are typically not necessary in the final version of the code. It would be helpful to remove the console log statements before submitting your code! ------------------------------ In week-3/quote-generator/style.css <#189 (comment)> : > + align-items: flex-end; + margin-right: 50px; +} +button{ + font-size: 0.6em; + font-weight: bold; + padding: 15px 19px; + border: none; + border-radius: 5px; + background-color: rgb(187, 156, 156); + color: rgb(57, 43, 43); +} +#check-box{ + position: absolute; + margin-top: 80px; +} Your preview looks great! Well done @BakhatBegum <https://github.com/BakhatBegum> ! — Reply to this email directly, view it on GitHub <#189 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A7AJUM5SC3FO3EZ3OZMIM7LYQ227NAVCNFSM6AAAAABB2JYA2KVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTQNBXGYZDMNZTGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>