TRUkae/quote_randomizer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upload files to "/"

Browse source
This commit is contained in:
Lou 2025-09-17 11:36:48 +00:00
parent 773368764e
commit 381cc3f098
3 changed files with 164 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
custom.js Normal file
View file

@ -0,0 +1,27 @@
const quotes = [{
quote: `"wesh mgl"`,
writer: `– PD-nim`,
image: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSUm29nme3KHFOHSTY2zDwOs3NIHdxeajrCS0_JIminji34YL-x"
}, {
quote: `"겨울이 지나면 다시 봄은 오는 거야 <br>
Once the winter passes, the spring will come again""`,
writer: `– BTS (Answer: Love Myself)`,
image: "https://upload.wikimedia.org/wikipedia/en/e/e2/BTS%2C_Love_Yourself_Answer%2C_album_cover.jpg"
}, {
quote: `"최선을 넌 다했을 뿐이야 <br> All you did was just to do your best "`,
writer: `– RM in No.2 (with parkjiyoon)`,
image: "https://media.cdnws.com/_i/209718/8099/376/0/rm-bts-indigo-book-edition-cover.jpeg"
}]
let btn = document.querySelector("#Qbtn");
let quote = document.querySelector(".quote");
let writer = document.querySelector(".writer");
let image = document.querySelector(".img");
btn.addEventListener("click", function() {
let random = Math.floor(Math.random() * quotes.length);
quote.innerHTML = quotes[random].quote;
writer.innerHTML = quotes[random].writer;
image.src = quotes[random].image;
});

36
index.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quotes Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h2>Inspiring quotes</h2>
</div>
<div class="main-content">
<div class="text-area">
<span class="quote">"겨울이 지나면 다시 봄은 오는 거야 <br>
Once the winter passes, the spring will come again"</span>
</div>
<div class="image-container">
<img class="img" src="https://upload.wikimedia.org/wikipedia/en/e/e2/BTS%2C_Love_Yourself_Answer%2C_album_cover.jpg" alt="Author's Photo">
</div>
<div class="writer">– BTS (Answer: Love Myself)</div>
<div class="button-area">
<div class="btn">
<button id="Qbtn">Another quote</button>
</div>
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>

101
style.css Normal file
View file

@ -0,0 +1,101 @@
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'calisto mt', serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #88648c;
height: 100vh;
}
.container {
width: 750px;
height: 650px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.header {
text-align: center;
margin-bottom: 50px;
}
.header h2 {
font-weight: 400;
color: #fff;
}
.main-content {
width: 100%;
padding: 50px 40px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 25px 31px 0 rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
}
.text-area {
text-align: center;
font-size: 25px;
color: #262626;
line-height: 1.5;
height: 200px; /* Add this fixed height */
overflow: auto; /* Add this to enable scrolling if the text exceeds the fixed height */
}
.main-content .image-container {
width: 50%;
height: 200px; /* Add this fixed height */
display: flex;
justify-content: center;
align-items: center;
}
.main-content .image-container .img {
max-width: 100%;
max-height: 100%; /* Add this to fit the image within the fixed height */
}
.main-content .writer {
text-transform: uppercase;
letter-spacing: 5px;
color: #88648c;
text-align: center;
margin-top: 20px;
font-size: 25px;
}
.button-area {
display: flex;
justify-content: center;
align-items: flex-end;
padding: 10px 0;
}
.button-area .btn button {
background-color: #aca5b0;
color: #000;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
border: none;
outline: none;
padding: 10px;
}
.button-area button:active {
background-color: #88648c;
}
</style>