Skip to content

Commit fe77989

Browse files
JalalalattarJalalalattar
committed
Project week1 is finish
1 parent 5075c9b commit fe77989

4 files changed

Lines changed: 133 additions & 0 deletions

File tree

‎Week1/homework/js2-exercises/img.gif‎

744 KB
Loading

‎Week1/homework/js2-exercises/project w1 quateGenerator.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
section{
2+
background-image: url(./img.gif);
3+
background-size: cover;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
height: 100%;
8+
width: 100%;
9+
position: relative;
10+
margin: auto;
11+
}
12+
#mid-box{
13+
margin-top: 30%;
14+
}
15+
#quote-text {
16+
color:whitesmoke;
17+
position: relative;
18+
height: 40%;
19+
display: flex;
20+
justify-items: stretch;
21+
justify-content: space-around;
22+
23+
}
24+
.btn-wrapper {
25+
position: relative;
26+
align-items: center;
27+
display: flex;
28+
justify-content: center;
29+
bottom: 20px;
30+
}
31+
32+
#btn {
33+
position: relative;
34+
border: solid rgb(255, 255, 255) 1px;
35+
border-radius: 10px;
36+
font-size: 1em;
37+
text-align: center;
38+
padding: 10px;
39+
font-family: 'Source Sans Pro', sans-serif;
40+
background-color: transparent;
41+
color:whitesmoke;
42+
}
43+
#btn:active {
44+
box-shadow: 0 0 40px 40px rgba(255, 255, 255, 0.281) inset;
45+
position: relative;
46+
top: 2px;
47+
}
48+
p {
49+
font-size: 3em;
50+
}
51+
.text-wrapper {
52+
padding-top: 20%;
53+
}
54+
#name {
55+
right: 0px;
56+
text-align: end;
57+
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
58+
59+
}

‎Week1/homework/js2-exercises/project w1 quateGenerator.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="project w1 quateGenerator.css">
9+
<title>quote generator</title>
10+
</head>
11+
12+
<body>
13+
<section id='main'>
14+
<div id="mid-box">
15+
<div id="quote-box">
16+
<div id="quote-text">
17+
<i class="fas fa-quote-right fa-3x"></i>
18+
<div class="text-wrapper">
19+
<p>Click to enlighten yourself</p>
20+
<div id='name'>
21+
<p></p>
22+
</div>
23+
24+
</div>
25+
<i class="fas fa-quote-right fa-3x"></i>
26+
</div>
27+
<div class="btn-wrapper">
28+
<button id='btn'>NEW QOUTE</button>
29+
</div>
30+
</div>
31+
</div>
32+
</section>
33+
34+
35+
<script src="project w1 quateGenerator.js"> </script>
36+
</body>
37+
38+
</html>

‎Week1/homework/js2-exercises/project w1 quateGenerator.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use strict';
2+
3+
let quotes = [{
4+
text: 'Be a joke unto yourself',
5+
author: 'Osho'
6+
},
7+
{
8+
text: 'Be a light unto yourself',
9+
author: 'Lord Buddha'
10+
}, {
11+
text: 'Know thyself',
12+
author: 'Socrates'
13+
}, {
14+
text: 'It takes time to understand nothing',
15+
author: 'Zen proverb'
16+
}, {
17+
text: 'This too shall pass',
18+
author: 'Zen proverb'
19+
}, {
20+
text: 'What you seek is seeking you',
21+
author: 'Rumi'
22+
}, {
23+
text: 'Judge not, that ye be not judged',
24+
author: 'Jesus Christ'
25+
}]
26+
27+
function pickQuote() {
28+
const randomNum = Math.floor((Math.random() * quotes.length));
29+
const quoteEl = document.querySelector('.text-wrapper').firstElementChild;
30+
const authorEl = document.querySelector('#name').firstElementChild;
31+
quoteEl.innerText = `${quotes[randomNum].text}`;
32+
authorEl.innerText = `${quotes[randomNum].author}`;
33+
}
34+
window.onload = pickQuote;
35+
const btnEl = document.querySelector('#btn');
36+
btnEl.addEventListener('click', pickQuote);

0 commit comments

Comments
 (0)