fyrfli/jsquotes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Added next steps to README; added instruction et all in footer

Browse Source
This commit is contained in:
Camille Frantz 2022-05-18 00:23:56 -05:00
parent eaf8a44faf
commit 0ce4c9a6cb
4 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -2,4 +2,8 @@
I wanted to create an "app" that would read in JSON and print out the results randomly based on a randomly generated number. It took me a while to get right, mostly because of the JSON file format. I have it down now. This is my result. I wanted to create an "app" that would read in JSON and print out the results randomly based on a randomly generated number. It took me a while to get right, mostly because of the JSON file format. I have it down now. This is my result.
## Next steps ...
I want to add more quotes and a button to run the code instead of having the user reload the page
-- 18 May, 2022; 00:13:59 -- 18 May, 2022; 00:13:59

4
app.js
View File

@ -1,3 +1,7 @@
// Full year for footer
const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear();
const disp = document.querySelector(".display"); const disp = document.querySelector(".display");
fetch("FavouriteQuotes.json") fetch("FavouriteQuotes.json")

6
index.html
View File

@ -11,6 +11,12 @@
<body> <body>
<div class="display"></div> <div class="display"></div>
<div class="instructions">
<p>{{ Hit Reload to see a new quote }}</p>
</div>
<div class="footer">
&copy;<span id="jsyear"></span> Camille Frantz (<a href="https://github.com/fyrfli" target="_blank">@fyrfli</a>).
</div>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>

23
style.css
View File

@ -15,4 +15,27 @@
font-size: 1.3rem; font-size: 1.3rem;
padding: 2rem; padding: 2rem;
border-radius: 12px; border-radius: 12px;
}
.instructions {
margin-top: 2rem;
text-align: center;
border-bottom: 1px dotted #0c024d;
font-style: italic;
font-size: 0.9rem;
}
.footer {
text-align: center;
font-size: 0.8rem;
margin-top: 2rem;
}
.footer a:any-link {
text-decoration: none;
color: #0c024d;
}
.footer a:hover {
color: #0dbcc5;
} }