Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e399c06
final sweep of module js2
BakhatBegum Dec 4, 2023
9d627ac
add events and functions
BakhatBegum Jan 8, 2024
ca521fb
added css
BakhatBegum Jan 9, 2024
e71ccb7
removed unnecessary lines
BakhatBegum Jan 10, 2024
df68d42
added color and font size
BakhatBegum Jan 14, 2024
58c13c6
made changes for feedback
BakhatBegum Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions week-1/fix/median.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
// Fix this implementation
// Start by running the tests for this function
// If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory
//Fix this implementation
//Start by running the tests for this function
//If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory

function calculateMedian(list) {
const middleIndex = Math.floor(list.length / 2);
const median = list.splice(middleIndex, 1)[0];
return median;
}

module.exports = calculateMedian;
//calculateMedian( 3, 3, 4, 5)
//module.exports = calculateMedian;

// console.log(calculateMedian( 3, 3, 4, 5))


16 changes: 14 additions & 2 deletions week-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,25 @@
<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>
</head>
<body>
<h1>hello there</h1>
<section class="layout">
<div class="content">
<h1>Hello there</h1>
<p id="quote"></p>
</div>
<div class="side">
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<form>
<label for="scales">Checkbox</label>
<input type="checkbox" id = "check-box"/>
</form>
<p id="auto-play-text"></p>
</div>
</section>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

</body>
</html>
53 changes: 45 additions & 8 deletions week-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ 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",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

},
{
quote: "Whatever the mind of man can conceive and believe, it can achieve.",
Expand Down Expand Up @@ -140,7 +140,7 @@ const quotes = [
},
{
quote: "Either you run the day, or the day runs you.",
author: "Jim Rohn",
author: "- Jim Rohn",
},
{
quote: "Whether you think you can or you think you can't, you're right.",
Expand Down Expand Up @@ -207,7 +207,7 @@ const quotes = [
{
quote:
"Certain things catch your eye, but pursue only those that capture the heart.",
author: " Ancient Indian Proverb",
author: "Ancient Indian Proverb",
},
{
quote: "Believe you can and you're halfway there.",
Expand Down Expand Up @@ -266,7 +266,7 @@ const quotes = [
{
quote:
"Happiness is not something readymade. It comes from your own actions.",
author: "Dalai Lama",
author: "- Dalai Lama",
},
{
quote:
Expand Down Expand Up @@ -337,7 +337,7 @@ const quotes = [
},
{
quote: "A person who never made a mistake never tried anything new.",
author: " Albert Einstein",
author: "Albert Einstein",
},
{
quote:
Expand All @@ -354,7 +354,7 @@ const quotes = [
},
{
quote: "You become what you believe.",
author: "Oprah Winfrey",
author: "- Oprah Winfrey",
},
{
quote: "I would rather die of passion than of boredom.",
Expand Down Expand Up @@ -478,7 +478,7 @@ const quotes = [
},
{
quote: "Nothing is impossible, the word itself says, “I'm possible!”",
author: "-Audrey Hepburn",
author: "Audrey Hepburn",
},
{
quote: "The only way to do great work is to love what you do.",
Expand All @@ -490,4 +490,41 @@ const quotes = [
},
];

// call pickFromArray with the quotes array to check you get a random quote


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();
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

button.addEventListener("click", getQoutes);

const checkBox = document.getElementById("check-box");

setInterval(() => {

if(checkBox.checked){
return "On", getQoutes();
}
}, 5000);

const autoPlay = document.getElementById("auto-play-text")
checkBox.addEventListener("change",function(){
if(checkBox.checked){
autoPlay.textContent = "auto-play:ON";
}else{
autoPlay.textContent = "";
}
});


45 changes: 45 additions & 0 deletions week-3/quote-generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,46 @@
/** Write your CSS in here **/
body{
font-family:sans-serif;
font-size: 30px;
background-color: rgb(187, 156, 156);
margin: 0;
padding: 0;

}

.layout{
border: 6px solid ;
background-color: rgb(137, 94, 94);
margin-top: 200px;
width: 90%;
border-top-right-radius: 250px;
border-bottom-left-radius: 250px;
margin-left: 60px;
}
.content{
color: rgb(50, 32, 32);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.side{
color: rgb(50, 32, 32);;
display: flex;
flex-direction: column;
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;
} */