Also, I updated the FCC overview at the bottom of my blog posts to reflect the updates that FCC made.
So, if you want to insert an apostrophe inside of a quote in some code, you can do this:
'It\'s not time yet.'
The \ will prevent the apostrophe from closing the quote. This project was much easier than I thought it would be. I'm basically done, I need a few more quotes, here's a screenshot:
I'm done. Here's the HTML:
<body>
<div id="centralDiv" class="text-center center-block">
<h1>Random Quote Generator</h1>
<h4>These are some of my favorite self improvement quotes. I hope you enjoy them!</h4>
<br>
<button type="button" class="btn btn-default" id="buttonStyling" onClick="quoteFunction();">Generate New Quote</button>
<br>
<div><h3 id="randomQuote"></h3></div>
</div>
</body>
And here's the CSS:
#centralDiv {
color: white;
display: block;
border: 2px solid black;
width: 80%;
margin-top: 40px;
height: 460px;
border-radius: 10px;
background: #62A9FF;
font-family: Monospace, Arial;
}
#buttonStyling {
border: 2px solid black;
color: #2966B8;
}
#buttonStyling:hover {
background: #2966B8;
color: white;
}
#randomQuote {
font-family: Monospace, Arial;
}
And here's the JavaScript:
function quoteFunction() {
var newQuote;
num = Math.floor((Math.random() * 10) + 1);
if (num === 1) {
newQuote = "'Continuous effort - not strength or intelligence - is the key to unlocking our potential.' -- Winston Churchill";
}
if (num === 2) {
newQuote = "'Success is nothing more than a few simple disciplines, practiced every day.' -- Jim Rohn";
}
if (num === 3) {
newQuote = "'Failure is not a single, cataclysmic event. You do not fail overnight. Instead, failure is a few errors in judgment, repeated every day.' -- Jim Rohn";
}
if (num === 4) {
newQuote = "'It\'s not the big things that add up in the end; it\'s the hundreds, thousands, or millions of little things that separate the ordinary from the extraordinary.' -- Darren Hardy";
}
if (num === 5) {
newQuote = "'Earning success is hard. The process is laborious, tedious, sometimes even boring. Becoming wealthy, influential, and world-class in your field is slow and arduous.' -- Darren Hardy";
}
if (num === 6) {
newQuote = "'A daily routine built on good habits and disciplines separates the most successful among us from everyone else. A routine is exceptionally powerful.' -- Darren Hardy";
}
if (num === 7) {
newQuote = "'Take care of your body. It is the only place you have to live.' -- Jim Rohn";
}
if (num === 8) {
newQuote = "'The great danger of the media is that it gives us a very perverted view of the world. Because the focus and the repetition of messaging is on the negative, that\’s what our minds start believing. This warped and narrow view of what\’s not working has a severe influence on your creative potential. It can be crippling.' -- Darren Hardy";
}
if (num === 9) {
newQuote = "'And as long as you\’re making choices unconsciously, you can\’t consciously choose to change that ineffective behavior and turn it into productive habits.' -- Darren Hardy";
}
if (num === 10) {
newQuote = "'If we want to succeed, we need to recover our grandparents\’ work ethic.' -- Darren Hardy";
}
document.getElementById("randomQuote").innerHTML = newQuote;
}
Well, I changed the quote a little, I made the div larger and added some padding as well. So, there's actually one more thing I'm supposed to add, and that's a button that will allow me to tweet out the quote...
Well, I got a tweet button added, and I know how to get the tweet to say something (we add data-text="what I want it to say" to the script code), but I wasn't able to get it to insert the actual quote into the twit. Here's the updated screenshot:
And here's the updated HTML:
<body>
<div id="centralDiv" class="text-center center-block">
<h1>Random Quote Generator</h1>
<h4>These are some of my favorite self improvement quotes. I hope you enjoy them!</h4>
<br>
<button type="button" class="btn btn-default" id="buttonStyling" onClick="quoteFunction();">Generate New Quote</button>
<br>
<div><h3 id="randomQuote"></h3></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Adancode" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</body>
And the CSS:
#centralDiv {
color: white;
display: block;
border: 2px solid black;
width: 90%;
padding-right: 3%;
padding-left: 3%;
margin-top: 40px;
height: 500px;
border-radius: 10px;
background: #62A9FF;
font-family: Monospace, Arial;
}
#buttonStyling {
border: 2px solid black;
color: #2966B8;
}
#buttonStyling:hover {
background: #2966B8;
color: white;
}
#randomQuote {
font-family: Monospace, Arial;
}
And the JavaScript:
function quoteFunction() {
var newQuote;
num = Math.floor((Math.random() * 10) + 1);
if (num === 1) {
newQuote = "'Continuous effort - not strength or intelligence - is the key to unlocking our potential.' -- Winston Churchill";
}
if (num === 2) {
newQuote = "'Success is nothing more than a few simple disciplines, practiced every day.' -- Jim Rohn";
}
if (num === 3) {
newQuote = "'Failure is not a single, cataclysmic event. You do not fail overnight. Instead, failure is a few errors in judgment, repeated every day.' -- Jim Rohn";
}
if (num === 4) {
newQuote = "'It\'s not the big things that add up in the end; it\'s the hundreds, thousands, or millions of little things that separate the ordinary from the extraordinary.' -- Darren Hardy";
}
if (num === 5) {
newQuote = "'Earning success is hard. The process is laborious, tedious, sometimes even boring. Becoming wealthy, influential, and world-class in your field is slow and arduous.' -- Darren Hardy";
}
if (num === 6) {
newQuote = "'A daily routine built on good habits and disciplines separates the most successful among us from everyone else. A routine is exceptionally powerful.' -- Darren Hardy";
}
if (num === 7) {
newQuote = "'Take care of your body. It is the only place you have to live.' -- Jim Rohn";
}
if (num === 8) {
newQuote = "'The great danger of the media is that it gives us a very perverted view of the world. Because the focus and the repetition of messaging is on the negative, that\’s what our minds start believing. This warped and narrow view of what\’s not working has a severe influence on your creative potential. It can be crippling.' -- Darren Hardy";
}
if (num === 9) {
newQuote = "'And as long as you\’re making choices unconsciously, you can\’t consciously choose to change that ineffective behavior and turn it into productive habits.' -- Darren Hardy";
}
if (num === 10) {
newQuote = "'If we want to succeed, we need to recover our grandparents\’ work ethic.' -- Darren Hardy";
}
document.getElementById("randomQuote").innerHTML = newQuote;
}
All right, moving on to the next project, and I'll come back to this later when I come across the info I need to get that quote inserted into the tweet! Also, It's 5:22 a.m., I couldn't sleep, I was so focused on this project and the last project that I basically pulled an all-nighter. Time to get some sleep.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (768 pgs.)
In Progress: "Head First JavaScript," by Eric Freeman and Elisabeth Robson (on pg. 56)
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers (293 pgs., 89 chapters with 20 questions/problems per chapter, for a total of 1,780 coding questions/problems answered)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.
Note: Switched to FCC for the great online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects On 4 of 5
10. Intermediate Algorithm Scripting
11. Intermediate Front End Development Projects
12. Claim Your Front End Development Certificate
13. Upper Intermediate Algorithm Scripting
14. Automated Testing and Debugging
15. Advanced Algorithm Scripting
16. AngularJS
17. Git
18. Node.js and Express.js
19. MongoDB
20. Full Stack JavaScript Projects
21. Claim Your Full Stack Development Certificate
After the FCC work above (estimated to take 800 hours), there are 800 more hours of coding projects on behalf of non-profits, which, in addition to contributing to the common good, provide us an opportunity to expand our networks and build a robust portfolio.
Hours Spent Coding Today: 4
Total Hours Coding: 685
No comments:
Post a Comment